In this Blog Post, You will learn how to create an amzing submit button with awesome css animation on click, using HTML, CSS and Javascript.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Submit Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="submitbtn">Submit</button>
<script>
const submit_btn = document.querySelector(".submitbtn");
submit_btn.addEventListener("click", () => {
submit_btn.classList.add("submiting");
submit_btn.innerHTML = "";
setTimeout(() => {
submit_btn.classList.remove("submiting");
submit_btn.innerHTML = "Done!";
},3000)
});
</script>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
body{
background-color: #FF7F50;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.submitbtn{
width: 320px;
height: 100px;
background-color: #34495e;
color: #f1f1f1;
font-size: 30px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
position: relative;
transition: .3s ease-in-out;
}
.submitbtn:hover{
opacity: .9;
}
.submitbtn.submiting{
height: 28px;
}
.submitbtn.submiting::before{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #f1f1f1;
left: 4px;
top: 4px;
border-radius: 50%;
opacity: 0;
animation: move 1s infinite ease-in-out;
}
@keyframes move{
50%{
opacity: 1;
}
to{
left: 296px;
}
}
You can download the full code source and resources from here
BA360EDC
ReplyDeletealtındağ esçort
esçort bayan giresun
ümraniye yabancı esçort
diyarbakır esçort numaraları
finike esçort
bingöl esçort
yeşilyurt esçort
esçort zonguldak
karabük esçort