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: 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