Button with gradient borders in CSS

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

Preview:

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: Convert color image to black and white with CSS

Read also: 5 best CSS Frameworks for frontend development

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

One response to “Button with gradient borders in CSS”

1. David says:

   April 22, 2023 at 8:42 pm

   great

   Reply