Skip to main content

Pure CSS Loading Spinner

Oct 15, 2022CodeCatch
Loading...

More CSS Posts

Animated underline in button when selected

Nov 28, 2024shaiRos

0 likes • 4 views

button::after {
content: "";
position: absolute;
bottom: 0; /* Position underline at the bottom */
left: 50%; /* Start the underline in the middle */
transform: translateX(-50%); /* Center it horizontally */
width: 0; /* Adjust width relative to the button's content */
height: 4px;
background-color: #007bff; /* Blue underline */
border-radius: 2px; /* Optional: Rounded corners for the rectangle */
}
button.selected::after {
width: 90%; /* Final width when the button is selected */
transition: width 0.3s ease; /* Smooth animation for width */
}