CSS Gradient Buttons

CSS Gradient Buttons

HTML
 <div class="gradient-btn">
    <i  class="fa fa-search"></i>
    <span>Search</span>
</div>
CSS
.fa{ 
  width: 40px;
  height: 40px; 
  line-height: 40px;
  border-radius: 50%;
  border: 2px solid #FFF;
  margin-right: 10px;
  text-align: center;
}
 
.gradient-btn{ 
    height: 70px;
    line-height: 70px;
    width: 180px;
    margin: 10px;
    padding-left: 20px;
    border-radius: 50px;
    float: left;
    color: #FFF; 
    box-shadow: 5px 5px 2px -2px #a5a5a5;
    background-image: linear-gradient(to right top, #eb4f12, #e74717, #e23f1b, #de361e, #d92d21);
}

.gradient-btn:hover{
    transition: all 2s ease;
    transform: translateX(-10px);
    cursor: pointer;
    box-shadow: 8px 8px 2px -2px #a5a5a5;
}

DEMO

View Demo
955 Views
54960cookie-checkCSS Gradient Buttons

Leave a Reply

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