Button with CSS animation on click

  • Last updated: Nov 3, 2023
  • Views: 234
  • Author: Admin
Button with CSS animation on click

Hello colleagues.

In this article, you will learn how to create a submit button with CSS animation on click using HTML, CSS, and Javascript.

 

HTML Code:

<body>
<button class="submit_button">Send</button>
<script>
    const btn = document.querySelector(".submit_button");
    btn.addEventListener("click", () => {
        btn.classList.add("submiting");
        btn.innerHTML = "";
        setTimeout(() => {
            btn.classList.remove("submiting");
            btn.innerHTML = "Success!";
        },3000)
    });
</script>
</body>

 

CSS Code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #E7E7DE;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit_button{
    width: 320px;
    height: 100px;
    background-color: #00587A;
    color: #E7E7DE;
    font-size: 25px;
    font-weight: 600;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: .1s ease-in-out;
}

.submit_button:hover{
    opacity: .9;
}

.submit_button.submiting{
    height: 28px;
}

.submit_button.submiting::before{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #E7E7DE;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    opacity: 0;
    animation: change_btn 1s infinite ease-in-out;
}

@keyframes change_btn{
    50%{
        opacity: 1;
    }
    to{
        left: 296px;
    }
}

 

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