<div class="links"> <a href="#" class="style1">Link 1</a> <a href="#" class="style2">Link 2</a> <a href="#" class="style3">Link 3</a> </div>
.links {
display: inline-flex;
flex-direction:column;
gap: 20px;
padding: 20px;
}
.style1 {
display: inline-block;
padding: 12px 24px;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #e9ecef;
color: #212529;
font-weight: 600;
font-size: 1rem;
border-radius: 8px;
border: 1px solid transparent;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
cursor: pointer;
text-transform: none;
}
.style1:hover {
background-color: #dee2e6;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.style1:active {
background-color: #ced4da;
transform: translateY(0px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.style1:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
.style2 {
display: inline-block;
padding: 14px 28px;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
color: #ffffff;
font-weight: 600;
font-size: 1.05rem;
border-radius: 30px;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.5s ease;
background-size: 150% auto;
background-position: 0% 0%;
cursor: pointer;
text-align: center;
}
.style2:hover {
transform: translateY(-2px);
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
background-position: 100% 0%;
}
.style2:active {
transform: translateY(0px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
background-position: 50% 0%;
}
.style2:focus-visible {
outline: 2px solid #80bdff;
outline-offset: 2px;
}
.style3 {
display: inline-block;
padding: 12px 25px;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #e74c3c;
color: #ffffff;
font-weight: 500;
font-size: 1rem;
border-radius: 6px;
border: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.style3:hover {
background-color: #c0392b;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.style3:active {
background-color: #a93226;
transform: translateY(0px);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.style3:focus-visible {
outline: 2px solid #f1948a;
outline-offset: 2px;
}Nothing to show yetType HTML, CSS or JavaScript and your page appears here.
Click any element to find its code Esc
Check this code before you run it
It came from a shared link. It runs with fewer permissions, so it cannot open pop-ups, submit forms or start downloads.
0.00s / 0.00s
Nothing has animated yet. Hover, click or type in the preview and each CSS animation, transition or
element.animate() call shows up here as it plays.