/* Initial state */
.your-button-class {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background-color: #e91e63;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    outline: none;
    transition: border-bottom 0.3s ease-in-out;
}

/* Border-bottom effect */
.your-button-class::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #e91e63; /* Pink color */
    transition: transform 0.3s ease-in-out;
    transform: scaleX(0); /* Initial scale to 0 */
    transform-origin: right;
}

/* Hover and focus state */
.your-button-class:hover::after,
.your-button-class:focus::after {
    transform: scaleX(1); /* Scale to full width */
    transform-origin: left; /* Transition from left to right */
}

/* Transition out (when mouse leaves) */
.your-button-class:focus:not(:hover)::after,
.your-button-class:hover:not(:focus)::after {
    transform: scaleX(0); /* Scale back to 0 */
    transform-origin: right; /* Transition from right to left */
}
