Two Stylish CSS Buttons For Your Websites

This is one of the most practical CSS buttons which you can use on any website. In this button example, we have given two types of button hover animations. On hovering the button, the icon goes to the left to right or right to left. For icons, we used BoxIcons. The whole button animation is made using HTML5 & CSS3. Font size and the color transitions are done perfectly in the default design itself. So if you are in a hurry, You can use the code given below and save your time.

Button Style One: Icon left to right

Step 01: HTML Code

<a href="#" class="default-btn">
    <i class='bx bx-book-reader icon-arrow before'></i>
        <span class="label">Read All</span>
    <i class="bx bx-book-reader icon-arrow after"></i>
</a>

Step 02: CSS Code

.default-btn {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    display: inline-block;
    padding: 13px 25px 12px 55px;
    position: relative;
    background-color: #ff1949;
    color: #ffffff;
    border-width: 2px;
    border-style: solid;
    border-color: #ff1949;
    border-radius: 1px;
    font-size: 14.5px;
    font-weight: 700;
}
.default-btn .label, .default-btn .icon-arrow {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-perspective: 1000;
    perspective: 1000;
}
.default-btn .label {
    display: inline-block;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}
.default-btn .icon-arrow {
    color: #ffffff;
    top: 11px;
    -webkit-transition: opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    font-size: 25px;
}
.default-btn .icon-arrow.before {
    left: 20px;
    position: absolute;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
.default-btn .icon-arrow.after {
    opacity: 0;
    position: absolute;
    right: 20px;
    -webkit-transform: translateX(75%) scaleX(0.1);
    transform: translateX(75%) scaleX(0.1);
    -webkit-transform-origin: right center;
    transform-origin: right center;
}
.default-btn:hover, .default-btn:focus {
    background-color: #0eb582;
    color: #ffffff;
    border-color: #0eb582;
}
.default-btn:hover .label, .default-btn:focus .label {
    -webkit-transform: translateX(-32px);
    transform: translateX(-32px);
}
.default-btn:hover .icon-arrow.before, .default-btn:focus .icon-arrow.before {
    opacity: 0;
    -webkit-transform: translateX(-75%) scaleX(0.1);
    transform: translateX(-75%) scaleX(0.1);
}
.default-btn:hover .icon-arrow.after, .default-btn:focus .icon-arrow.after {
    opacity: 1;
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
}

Note: That’s it for button style one🙌

Button Style Two: Icon right to left

Step 01: HTML Code

<a href="#" class="optional-btn">
    <i class='bx bx-book-reader icon-arrow before'></i>
        <span class="label">Read All</span>
    <i class="bx bx-book-reader icon-arrow after"></i>
</a>

Step 02: CSS Code

.optional-btn {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    display: inline-block;
    padding: 13px 55px 12px 25px;
    position: relative;
    background-color: #0eb582;
    color: #ffffff;
    border-width: 2px;
    border-style: solid;
    border-color: #0eb582;
    border-radius: 1px;
    font-size: 14.5px;
    font-weight: 700;
}
.optional-btn .label, .optional-btn .icon-arrow {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-perspective: 1000;
    perspective: 1000;
}
.optional-btn .label {
    display: inline-block;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}
.optional-btn .icon-arrow {
    color: #ffffff;
    top: 11px;
    -webkit-transition: opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.4s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    font-size: 25px;
}
.optional-btn .icon-arrow.before {
    right: 20px;
    position: absolute;
    -webkit-transform-origin: right center;
    transform-origin: right center;
}
.optional-btn .icon-arrow.after {
    opacity: 0;
    position: absolute;
    left: 20px;
    -webkit-transform: translateX(-75%) scaleX(0.1);
    transform: translateX(-75%) scaleX(0.1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
.optional-btn:hover, .optional-btn:focus {
    background-color: #ff1949;
    color: #ffffff;
    border-color: #ff1949;
}
.optional-btn:hover .label, .optional-btn:focus .label {
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
}
.optional-btn:hover .icon-arrow.before, .optional-btn:focus .icon-arrow.before {
    opacity: 0;
    -webkit-transform: translateX(75%) scaleX(0.1);
    transform: translateX(75%) scaleX(0.1);
}
.optional-btn:hover .icon-arrow.after, .optional-btn:focus .icon-arrow.after {
    opacity: 1;
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
}

Note: That’s it for button style two🙌

Happy coding 🙂