Shadow effect when mouse hover the CSS Button that is no where as cool as here. Developed using css and html. Demo and download available.

Demo Download

Author Jarrod Thibodeau
Created OCTOBER 10, 2018
License Open
Compatible browsers Chrome, Firefox


HTML Snippet

<div id="button">    <h2>w3tweaks</h2>   <div id="buttonTwo">      <h2>w3tweaks</h2>   </div>   <div id="buttonThree">      <h2>w3tweaks</h2>   </div> </div>

CSS Code

@import url(""); html, body {   background: linear-gradient(to right, #659999, #f4791f);   display: flex;   font-family: Niramit, "sans-serif";   justify-content: center;   align-items: center;   height: 100%;   width: 100%;   margin: 0; }  #button, #buttonTwo, #buttonThree {   border: 1px solid white;   color: white;   width: 12em;   height: 3em;   text-align: center;   transition: all 0.5s; }  h2 {   line-height: 0.5em; }  #buttonTwo, #buttonThree {   visibility: hidden;   opacity: 0;   position: absolute;   margin-top: -51.5px; }  #button:hover {   cursor: pointer; }  #button:hover #buttonTwo, #button:hover #buttonThree {   visibility: visible;   opacity: 0.33; }  #button:hover #buttonTwo {   -webkit-transform: translateX(-3em) translateY(-3em);           transform: translateX(-3em) translateY(-3em); }  #button:hover #buttonThree {   -webkit-transform: translateX(3em) translateY(3em);           transform: translateX(3em) translateY(3em); }


Shadow effect when mouse hover the CSS Button Preview