<div class="button-container">
<button class="glass-morphism"><span class="btn-text-span">Hover Me!</span> </button>
</div>
.button-container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.glass-morphism{
font-size: 16px;
line-height: 30px;
font-weight: 500;
padding: 2px;
border-radius: 5px;
color: #fff;
position: relative;
border: 2px solid $white;
border: aliceblue;
transition: 0.5s;
box-shadow: 5px 5px 20px rgba(27, 27, 27, 0.3);
overflow: hidden;
background: rgb(255,255,255);
background: linear-gradient(350deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,1) 100%);
}
.btn-text-span{
display: block;
padding: 10px 50px;
border-radius: 5px;
background: rgb(162,27,58);
background: linear-gradient(90deg, rgba(162,27,58,1) 0%, rgba(195,22,40,1) 30%, rgba(199,21,38,1) 70%, rgba(162,27,58,1) 100%);
}
.glass-morphism::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 100%;
background: rgba(255,255,255,0.5);
transform: skew(50deg) translateX(310px);
transition: 0.7s;
}
}
.glass-morphism:hover{
transform: translateY(-3px);
cursor: pointer;
}
.glass-morphism:hover:after{
transform: skew(50deg) translateX(-100px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.