JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<a href=".." class="anchor-btn">링크</a>

CSS

a.anchor-btn {
    display: inline-block;
    padding: 10px 20px; /* Adjust the padding as needed */
    background-color: #007bff; /* Button color */
    color: white; /* Text color */
    text-align: center;
    text-decoration: none;
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Shadow effect */
    transition: 0.3s; /* Smooth transition for hover effect */
}

a.anchor-btn:hover {
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.3); /* Shadow effect on hover */
    background-color: #0056b3; /* Slightly darker color on hover */
}