<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.