How to Make Awesome Button Hover Effect with HTML and CSS
How to Make Awesome Button Hover Effect with HTML and CSS?
There are some Steps you can Follow to Make Awesome Effect on Button Hover.
Steps are:
- Open your Text Editor Tool
- Make two files with extension index.html and style.css
- If you know how to write html then you make a basic structure
- Otherwise you can copy these code from below-
HTML Codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">Hover Me!</button>
</body>
</html>
CSS Codes:
* {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
background: linear-gradient(-45deg, rgb(221, 8, 44), #23a6d5, #23d5ab,
rgb(209, 231, 9));
animation: gradient 15s ease infinite;
}
.btn {
box-sizing: border-box;
display: block;
width: 200px;
height: 80px;
appearance: none;
background-color: transparent;
border: 2px solid #118088;
border-radius: 0.6em;
cursor: pointer;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-transform: uppercase;
}
.btn:hover,
.btn:focus {
color: #fff;
}
.btn {
background: linear-gradient(-45deg, rgb(221, 8, 44), #23a6d5, #23d5ab,
rgb(209, 231, 9));
background-size: 400%, 400%;
transition: all 150ms ease-in-out;
animation: gradient 15s ease infinite;
}
.btn:hover {
box-shadow: 0 0 10px 0 #f0f7fc;
background: linear-gradient(-45deg, rgb(19, 129, 231), #23d5ab);
animation: gradient 15s ease infinite;
background-size: 400%, 400%;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
If you face any problem watch this Video:-
