How To Create Button Css With Animation
1. Create A Html File
2. Type Code That Gives You Below
3. After Copy You Have To Download All Images Related To This
4. Save As FileName.html
5. Run In Any Browser
Code Of Button Css With Animation
HTML CODE
BODY CODE
<button class="noselect">
<span>
submit
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24">
<path d="M0 11c2.761.575 6.312 1.688 9 3.438 3.157-4.23 8.828-8.187
15-11.438-5.861 5.775-10.711 12.328-14
18.917-2.651-3.766-5.547-7.271-10-10.917z"/>
</svg>
</button>
CSS CODE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: #00000;
background-image: linear-gradient(315deg, #0000 0%,#f6f0ea 74%);
}
.noselect{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
button{
width: 150px;
height: 50px;
background:none;
border: 2px solid #000000;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 500ms;
}
span, svg{
position: absolute;
color: #000000;
fill: transparent;
}
button:hover {
font-size: 14px;
}
button:focus {
outline: none;
border: 2px solid transparent;
width: 50px;
border-left: 2px solid #000000;
border-bottom: spin 2s 500ms forwards;
animation: spin 2s 500ms forwards;
}
button:focus span{
color: transparent;
}
button:focus svg{
animation: check 500ms 2300ms forwards;
}
@keyframes spin{
80%{border:2px solid transparent;
border-left: 2px solid #89db84;}
100%{transform: rotate(1080deg);
border: 2px solid#89db84;
}}
@keyframes check{
to{fill: #89db84}
}
@keyframes circle{
to{border:2px solid #89db84;}
}
}
JAVA SCRIPT NOT IN THE CODE
Link After Subscribe:
Click On The Button And Subscribe My Youtube Channel To Open Link Then Get Back To The Page...
Tags:
HTML & CSS