This content originally appeared on DEV Community and was authored by Technical Vandar
Source Code:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>Button With Awesome Hover Effect</title>
</head>
<body>
<div class="container">
<button>Hover Me</button>
<button>Hover Me</button>
<button>Hover Me</button>
<button>Hover Me</button>
</div>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.container{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button{
height: 50px;
width: 150px;
margin: 15px;
font-size: 25px;
font-weight: 550;
font-family: sans-serif;
background: none;
outline: none;
color: #0e95BF;
border: 2px solid #0e95BF;
cursor: pointer;
transition: 0.5s ease-in all;
}
button:nth-child(1):hover{
box-shadow: inset 0 60px 0 0 #0e95BF;
color: white;
}
button:nth-child(2):hover{
box-shadow: inset 80px 50px #0e95BF;
color: white;
}
button:nth-child(3):hover{
box-shadow: inset 0 0 0 40px #0e95BF;
color: white;
}
button:nth-child(4):hover{
box-shadow: inset 150px 0 0 0 #0e95BF;
color: white;
}
Find Me On:
This content originally appeared on DEV Community and was authored by Technical Vandar
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Technical Vandar | Sciencx (2021-09-23T05:18:57+00:00) Awesome Button Hover Effects Using Pure HTML & CSS. Retrieved from https://www.scien.cx/2021/09/23/awesome-button-hover-effects-using-pure-html-css/
" » Awesome Button Hover Effects Using Pure HTML & CSS." Technical Vandar | Sciencx - Thursday September 23, 2021, https://www.scien.cx/2021/09/23/awesome-button-hover-effects-using-pure-html-css/
HARVARDTechnical Vandar | Sciencx Thursday September 23, 2021 » Awesome Button Hover Effects Using Pure HTML & CSS., viewed ,<https://www.scien.cx/2021/09/23/awesome-button-hover-effects-using-pure-html-css/>
VANCOUVERTechnical Vandar | Sciencx - » Awesome Button Hover Effects Using Pure HTML & CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/23/awesome-button-hover-effects-using-pure-html-css/
CHICAGO" » Awesome Button Hover Effects Using Pure HTML & CSS." Technical Vandar | Sciencx - Accessed . https://www.scien.cx/2021/09/23/awesome-button-hover-effects-using-pure-html-css/
IEEE" » Awesome Button Hover Effects Using Pure HTML & CSS." Technical Vandar | Sciencx [Online]. Available: https://www.scien.cx/2021/09/23/awesome-button-hover-effects-using-pure-html-css/. [Accessed: ]
rf:citation » Awesome Button Hover Effects Using Pure HTML & CSS | Technical Vandar | Sciencx | https://www.scien.cx/2021/09/23/awesome-button-hover-effects-using-pure-html-css/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.