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

AuthorJarrod Thibodeau
CreatedOCTOBER 10, 2018
Compatible browsersChrome, Firefox

HTML Snippet

<div id="button"> 
  <div id="buttonTwo"> 
  <div id="buttonThree"> 

CSS Code

@import url("");
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;

#buttonThree {
  border: 1px solid white;
  color: white;
  width: 12em;
  height: 3em;
  text-align: center;
  transition: all 0.5s;

h2 {
  line-height: 0.5em;

#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 1

Latest posts by W3TWEAKS (see all)


Leave a Reply

Your email address will not be published. Required fields are marked *