8 Beautiful Buttons with Effect Shadow

<div class="container-eg-btn-3">
  <a class="button button-1">Raise Shadow</a>
  <a class="button button-2">Multi Layers</a>
  <a class="button button-3">Multi Layers 2</a>
  <a class="button button-4">Multi Color</a>
  <a class="button button-5">Multi Color 2</a>
  <a class="button button-6">Multi Color 3</a>
  <a class="button button-7">Raise Shadow 2</a>
  <a class="button button-8">Gradient Shadow</a>
</div>

.container-eg-btn-3 {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 0 auto 10px;
  padding: .5em;
  line-height: normal;
}
.container-eg-btn-3 .button {
  color: #fff;
  margin: 20px;
  padding: 12px 15px;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  transition: .3s;
  z-index: 1;
  background: #3aaeff;
  cursor: pointer;
  border-radius: 6px;
}
.container-eg-btn-3 .button-1:hover {
  box-shadow: 0 0.6em 0.5em -0.4em #fa4343;
  transform: translateY(-0.25em);
  background: #fa4343;
}
.container-eg-btn-3 .button-2:hover{
  background: rgb(255 0 102);
  box-shadow: rgba(255, 0, 102, 0.4) 4px 4px, rgba(255, 0, 102, 0.3) 8px 8px, rgba(255, 0, 102, 0.2) 12px 12px, rgba(255, 0, 102, 0.1) 16px 16px, rgba(255, 0, 102, 0.05) 20px 20px;
}
.container-eg-btn-3 .button-3:hover{
  background: rgb(129 0 255);
  box-shadow: rgba(129, 0, 255, 0.4) 0px 4px, rgba(129, 0, 255, 0.3) 0px 8px, rgba(129, 0, 255, 0.2) 0px 12px, rgba(129, 0, 255, 0.1) 0px 16px, rgba(129, 0, 255, 0.05) 0px 20px;
}
.container-eg-btn-3 .button-4:hover{
  background: #0000ff;
  box-shadow: rgb(255, 255, 255) 6px -6px 0px -3px, rgb(24 200 20) 6px -6px, rgb(255, 255, 255) 12px -12px 0px -3px, rgb(255, 217, 19) 12px -12px, rgb(255, 255, 255) 18px -18px 0px -3px, rgb(255 166 63) 18px -18px, rgb(255, 255, 255) 24px -24px 0px -3px, rgb(255 51 51) 24px -24px;
}
.container-eg-btn-3 .button-5:hover {
  box-shadow: rgb(24 200 20) -4px 4px, rgb(255 217 19) -8px 8px, rgb(255 166 63) -12px 12px, rgb(255 51 51) -16px 16px;
  background: #0000ff;
}
.container-eg-btn-3 .button-6:hover{
  background: #0000ff;
  box-shadow: #0000ff 0px 0px 0px 3px, rgb(24 200 20) 0px 0px 0px 6px, rgb(255 217 19) 0px 0px 0px 9px, rgb(255 166 63) 0px 0px 0px 12px, rgb(255 51 51) 0px 0px 0px 15px;
}
.container-eg-btn-3 .button-7:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, #000 0%, rgb(99 103 203 / 0%) 80%);
  transition-duration: 0.3s;
  transition-property: transform opacity;
}
.container-eg-btn-3 .button-7:hover{
  background: #000;
  transform: translateY(-5px);    
}
.container-eg-btn-3 .button-7:hover:before{
  opacity: 1;
  transform: translateY(5px);
}

.container-eg-btn-3 .button-8:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 6px;
}
.container-eg-btn-3 .button-8:hover:before, .container-eg-btn-3 .button-8:hover:after {
  opacity: 1;
}
.container-eg-btn-3 .button-8:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 6px;
  opacity: 0;
}
.container-eg-btn-3 .button-8:active:after {
  background: transparent;
}
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}