CSS Button Shadow

CSS Button Shadow

HTML
<div class="shadow-buttons">
  <div class="btn btn-1">
      Buttom Text
  </div>
  <div class="btn btn-2">
      Buttom Text
  </div>
  <div class="btn btn-3">
      Buttom Text
  </div>
  <div class="btn btn-4">
      Buttom Text
  </div>
   <div class="btn btn-5">
      Buttom Text
  </div>
  <div class="btn btn-6">
      Buttom Text
  </div>
  <div class="btn btn-7">
      Buttom Text
  </div>
  <div class="btn btn-8">
      Buttom Text
  </div>
  <div class="btn btn-9">
      Buttom Text
  </div>
  <div class="btn btn-10">
      Buttom Text
  </div>
  <div class="btn btn-11">
      Buttom Text
  </div>
  <div class="btn btn-12">
      Buttom Text
  </div>
</div>
CSS
body{
   font-family: 'Poppins', sans-serif;
   background: #ffd079;
   max-width: 1140px;
   margin: 50px auto;
}

.btn{
    float: left;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    margin: 1%;
    width: 23%;
    height: 60px;
    line-height: 60px; 
}

.btn-1{  
    background: #ed5562;
    border-bottom: 3px solid #e82e3e;
    -webkit-box-shadow: inset 0 -3px #e82e3e;
    box-shadow: inset 0 -3px #e82e3e;
}

.btn-2{ 
    background:  #42cb6f;
    border-bottom: 3px solid #2f8e4e;
    -webkit-box-shadow: inset 0 -3px  #2f8e4e;
    box-shadow: inset 0 -3px #2f8e4e;
}

.btn-3{ 
    background: #47cec0;
    border-bottom: 3px solid #3c988f; 
    -webkit-box-shadow: inset 0 -3px  #3c988f;
    box-shadow: inset 0 -3px #3c988f;
}

.btn-4{ 
    background: #ed5f55;
    border-bottom: 3px solid #b95049;
    -webkit-box-shadow: inset 0 -3px #b95049;
    box-shadow: inset 0 -3px #b95049;
}

.btn-5{ 
    background: #f57c4f;
    border-bottom: 3px solid #b55f3f;
    -webkit-box-shadow: inset 0 -3px  #b55f3f;
    box-shadow: inset 0 -3px #b55f3f;
}

.btn-6{ 
    background: #4ec2e7;
    border-bottom: 3px solid #32a5ca;
    -webkit-box-shadow: inset 0 -3px #32a5ca;
    box-shadow: inset 0 -3px #32a5ca;
}

.btn-7{ 
    background: #fcce54;
    border-bottom: 3px solid #d6ae43;
    -webkit-box-shadow: inset 0 -3px #d6ae43;
    box-shadow: inset 0 -3px #d6ae43;
}

.btn-8{ 
    background: #5c9ded;
    border-bottom: 3px solid #4e84c3;
    -webkit-box-shadow: inset 0 -3px #4e84c3;
    box-shadow: inset 0 -3px #4e84c3;
}

.btn-9{ 
    background: #ecaf0d;
    border-bottom: 3px solid #b3850c;
    -webkit-box-shadow: inset 0 -3px #b3850c;
    box-shadow: inset 0 -3px #b3850c;
    border-radius: 30px;
}

.btn-10{ 
    background: #e657d4;
    border-bottom: 3px solid #9e3691;
    -webkit-box-shadow: inset 0 -3px #9e3691;
    box-shadow: inset 0 -3px #9e3691;
    border-radius: 30px;
}

.btn-11{ 
    background: #199e29;
    border-bottom: 3px solid #0c5815;
    -webkit-box-shadow: inset 0 -3px #0c5815;
    box-shadow: inset 0 -3px #0c5815;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.btn-12{ 
    background: #484848;
    border-bottom: 3px solid #313030;
    -webkit-box-shadow: inset 0 -3px #313030;
    box-shadow: inset 0 -3px #313030; 
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.btn:hover{
    transition: 1s all ease-in-out;
    border-radius: 30px;
}

DEMO

View Demo
1,257 Views
55232cookie-checkCSS Button Shadow

Leave a Reply

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