Trang chủ
animation submit button
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="container"> <button id="button"></button> </div>
CSS
Copy
@charset "UTF-8"; * { font-family: "Roboto", sans-serif; } .container { position: absolute; top: 50%; left: 50%; margin-left: -65px; margin-top: -20px; width: 130px; height: 40px; text-align: center; } button { outline: none; height: 40px; text-align: center; width: 130px; border-radius: 40px; background: #fff; border: 2px solid #1ECD97; color: #1ECD97; letter-spacing: 1px; text-shadow: 0; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.25s ease; } button:hover { color: white; background: #1ECD97; } button:active { letter-spacing: 2px; } button:after { content: "SUBMIT"; } .onclic { width: 40px; border-color: #bbbbbb; border-width: 3px; font-size: 0; border-left-color: #1ECD97; -webkit-animation: rotating 2s 0.25s linear infinite; animation: rotating 2s 0.25s linear infinite; } .onclic:after { content: ""; } .onclic:hover { color: #1ECD97; background: white; } .validate { font-size: 13px; color: white; background: #1ECD97; } .validate:after { font-family: "FontAwesome"; content: ""; } @-webkit-keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
JS
Copy
const button = document.getElementById("button"); button.addEventListener("click", () => { // Thêm class 'onclic' với hiệu ứng 250ms button.classList.add("onclic"); setTimeout(() => { // Xóa class 'onclic' button.classList.remove("onclic"); // Thêm class 'validate' với hiệu ứng 450ms button.classList.add("validate"); setTimeout(() => { // Xóa class 'validate' button.classList.remove("validate"); }, 1250); // callback sau 1250ms }, 2250); // validate sau 2250ms });