Кнопка с CSS анимацией при нажатии
- Последнее обновление: 3 Ноября 2023 г.
- Просмотры: 105
- Автор: Админ
Коллеги всем привет.
В этой статье вы узнаете, как создать кнопку отправки с CSS-анимацией при нажатии, используя HTML, CSS и Javascript.
HTML Код:
<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 Код:
*{
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;
}
}
Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.
