Hello! Let's learn how to build a cool looking button with awesome hover
effect using Html and CSS only. Please follow the below code and get started
💻.
HTML Code
<body>
<div class="container">
<button class="btn">Hover me</button>
</div>
</body>CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: #f1f2f3;
display: flex;
font-family: sans-serif;
}
.container{
position: relative;
margin: auto;
}
.container .btn{
position: relative;
padding: 12px 16px;
outline: none;
border: none;
background: white;
color: #333;
font-size: 17px;
letter-spacing: 1px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.4);
cursor: pointer;
overflow: hidden;
z-index: 1;
}
.container .btn:before{
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background: #0077bb;
transition: .3s ease-in-out;
z-index: -1;
}
.container .btn:hover:before{
height: 100%;
}
Output
You can view your desired output on hovering over the button. Thanks
for visiting my blog!