White border around button + animation

Store Design
6

To achieve the transparent button with a white border and the smooth left-to-right fill animation on hover, you can use the following CSS:

.button--primary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.button--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.4s ease;
}

.button--primary:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.button--primary:hover {
    color: black; /* Change text color on hover if desired */
    border-color: black; /* Change border color if desired */
}

This should give you the desired button effect. Just add this CSS to your theme’s stylesheet or custom CSS section, and it should work!