CSS Button Hover shadow effect| box-shadow CodingTutorialS

HTML:

<div class='container'>
 <button class="btOne">Click me</button>
 <button class="btTwo">Click me</button>
 <button class="btThree">Click me</button>
</div>

CSS:

.container{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}
button{
 border: none;
 padding: 20px;
 margin: 12px;
 width: 150px;
 border-radius: 15px;
}
button:hover{
 box-shadow: 6px 6px 6px 0px gray;
 transition: box-shadow .5s;
}
.btOne{
 background-color: cyan;
}
.btTwo{
 background-color: yellow;
}
.btThree{
 background-color: pink;
}

Demo:

#buttonhovereffect #boxshadow #buttonhovershadoweffect