Blog

/* Basic button style */
.smart-button {
    background-color: transparent;
    border: 2px solid white;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 1. Using :focus 
   Triggered if focus is on the button itself */
.smart-button:focus {
    border-color: #007bff;
}

/* 2. Using :focus-within 
   Triggered if focus falls INSIDE the button (on the link) */
.smart-button:focus-within {
    background-color: #ffba00; /* Kaspi color */
    border-color: #ffba00;
}

/* Styles for the link inside to take up all the space */
.inner-link {
    color: white;
    text-decoration: none;
    outline: none; /* Remove standard link outline */
}