Button Hover Animation code for free
Priveiw
index.html
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<title>CSS Button</title>6
<link rel="stylesheet" href="/css/styles.css">7
<link rel="preconnect" href="https://fonts.googleapis.com">8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>9
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet">10
</head>11
<body>12
<button>Submit</button>13
</body>14
</html>styles.css
1
body{2
background-color: #212121;3
height: 100vh;4
display: flex;5
justify-content: center;6
align-items: center;7
overflow: hidden;8
}9
button{10
padding: 0.8em 1.8em;11
border-radius: 8px;12
background-color: transparent;13
color:#17c3b2;14
border:2px solid #17c3b2;15
font-size: 16px;16
cursor: pointer;17
z-index: 1;18
transition: 0.3s;19
overflow:hidden ;20
position: relative;21
}22
button:before{23
content:'';24
width: 0;25
height: 300%;26
position: absolute;27
top: 50%;28
left: 50%;29
transition: 0.5s ease;30
transform: translate(-50%,-50%) rotate(45deg);31
display: block;32
z-index: -1;33
background-color: #17c3b2;34
}35
button:hover::before{36
width: 105%;37
}38
button:hover{39
color:#111;40
}main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
