GLASS EFFECT HOVER BUTTONS
Hey Folks ✋!
Today I'am going to show you how you can build "Beautiful Glass Effect Hover Button"
But first of all you must know what is "Hover-Effect".
HOVER:
Applies to any element being hovered by the user's pointing device, but not activated.
There are three pseudo-classes that allow you to change the appearance of elements when a user is interacting with them.
- HOVER
- ACTIVE
- FOCUS
WHEN WE APPLIED HOVER?
This is applied when a user hovers over an element with a pointing device such as a mouse.
This has commonly been used to change the appearance of links and buttons when a user
places their cursor over them. It is worth noting that such events do not work on devices that use touch screens (such as the iPad) because the screen is not able to tell when someone is hovering their finger over an element.
EXAMPLE OUTPUT
SOURCE CODE
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="hover.css">
<title>Hover Effect</title>
</head>
<body>
<button>Hover Me <span></span>
</button>
<button>Hover Me <span></span>
</button>
<h4>By @Future Developer</h4>
</body>
</html>
CSS:
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color:#2e2e2e;
}
button{
cursor: pointer;
width: 180px;
height: 50px;
line-height: 50px;
font-size: 18px;
letter-spacing: 1px;
margin: 60px;
border: 0;
outline: 0;
border-radius: 1px;
background: transparent;
overflow: hidden;
transition: .4s;
}
button:nth-child(1){
color: rgb(91, 91, 163);
border: 1px solid;
}
button:nth-child(2){
color: #ee4a22;
border: 1px solid;
}
button:nth-child(1):hover {
background-color: rgb(91, 91, 163);
color: #222121;
}
button:nth-child(2):hover {
background-color: #ee4a22;
color: #222121;
}
button span{
display: flex;
width: 100px;
height: 10px;
background: #f0eeee;
filter: blur(8px);
transform: rotate(110deg)translateX(10px) translateY(100px);
transition: .7s;
}
button:hover span {
transform: rotate(110deg)translateX(-80px) translateY(-140px);
}
h4{
position: absolute;
color: aliceblue;
top: 85%;
align-items: center;
text-align: center;
}
Comments
Post a Comment