Button with gradient borders in CSS

In this post we’re going to create buttons with gradient border and transparent background.

Preview:

See the Pen
Button with Gradient Borders in CSS
by SLICEmyPAGE (@slicemypage)
on CodePen.

Html:

<ul class="btn-list">
    <li><a href="#" class="button button1">Click</a></li>
    <li><a href="#" class="button button2">Click</a></li>
    <li><a href="#" class="button button3">Click</a></li>
</ul> 

Css:


ul.btn-list{
  margin:0;
  padding:0;
  list-style:none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

ul.btn-list li{
  margin:10px;
  display:inline-block;  
}

.button{
  width:180px;
  padding:15px;
  text-align:center;
  padding:15px;
  font-size:20px;
  line-height:24px;
  letter-spacing:1px;
  display:inline-block;
  background-color: transparent;
  border-width: 4px;
  border-style: solid;
  text-decoration:none;
  color:#fff;
  transition:all 0.3s ease-in;
  position:relative;
}

.button:before {
    content: '';
    width: calc(100% + 8px);
    opacity: 0;
    height: calc(100% + 8px);
    position: absolute;
    left: -4px;
    top: -4px;
    transition: all 0.2s ease-in;
    z-index: -1;
}

.button:hover:before{
  opacity: 1;
}

.button1{
  border-image: linear-gradient(to right, #61aec7, #ccd400) 1;
}

.button1:before{
  background:linear-gradient(to right, #61aec7, #ccd400);
} 

.button2{
  border-image: linear-gradient(to right, #61aec7, #c70759) 1;
}

.button2:before{
  background:linear-gradient(to right, #61aec7, #c70759);
} 

.button3{
  border-image: linear-gradient(to right, #61aec7, #eb8258) 1;
}

.button3:before{
  background:linear-gradient(to right, #61aec7, #eb8258);
}

If you liked this article, then please subscribe to our mailing list for latest posts and updates. Join us on Twitter and Facebook for regular updates.

Comments

Leave a Reply

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