Creative pure CSS button with animation

  • Last updated: Nov 3, 2023
  • Views: 111
  • Author: Admin
Creative pure CSS button with animation

Hello colleagues.

In today's article, I will show you how you can create a creative button with animation in pure html and css without using javascript.

 

HTML Code:

<body>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        BUTTON
    </a>
</body>

 

CSS Code:

body {
    background-color: #EDF9FF;
    padding: 0;
    margin: 0;
}

a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4589B0;
    padding: 35px 50px;
    font-size: 50px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 2px 20px #1D628B;
    overflow: hidden;
}

a span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #BFE6EC, #1D628B);
    animation: span_animate1 1s linear infinite;
}

@keyframes span_animate1 {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}


a span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #BFE6EC, #1D628B);
    animation: span_animate2 1s linear infinite;
}

@keyframes span_animate2 {
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(100%);
    }
}

a span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, #BFE6EC, #1D628B);
    animation: span_animate3 1s linear infinite;
}

@keyframes span_animate3 {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}

a span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, #BFE6EC, #1D628B);
    animation: span_animate4 1s linear infinite;
}

@keyframes span_animate4 {
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(-100%);
    }
}

 


 

Thank you all, I hope my article was of some help to you.

SIMILAR ARTICLES

YII2 defaultRoute - How to change default controller in template

YII2 defaultRoute - How to change default controller in template

Pure HTML/CSS search bar

Pure HTML/CSS search bar

HTML/CSS - Expandable Searchbar Animation

HTML/CSS - Expandable Searchbar Animation