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);
}

Read also: SEMrush: an all-in-one digital marketing toolkit for growing your business

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 *