Shadow effect when mouse hover the CSS Button

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
Hits
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("https://fonts.googleapis.com/css?family=Niramit");
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);
}

Preview

Shadow effect when mouse hover the CSS Button Preview

Advertisement

Google Matched Content...