<ul>
<li><a href="#" class="btn gradient1">button</a></li>
<li><a href="#" class="btn gradient2">button</a></li>
<li><a href="#" class="btn gradient3">button</a></li>
</ul>
body {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
ul {
flex-basis: 80%;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
flex-basis: 32%;
list-style-type: none;
}
a {
text-decoration: none;
}
.btn {
font-size: 18px;
color: #fff;
padding: 20px 50px;
display: block;
border-radius: 50px;
text-align: center;
background-size: 180% auto;
transition: all .3s ease-out;
}
.btn:hover {
background-position: right center;
}
.gradient1 {
background-image: linear-gradient(left, #736EFE 0%, #5EFCE8 100%);
background-image: linear-gradient(left, #736EFE 0%, #5EFCE8 100%);
background-image: linear-gradient(to right, #736EFE 0%, #5EFCE8 100%);
}
.gradient2 {
background-image: linear-gradient(left, #E96D71 0%, #FAD7A1 100%);
background-image: linear-gradient(left, #E96D71 0%, #FAD7A1 100%);
background-image: linear-gradient(to right, #E96D71 0%, #FAD7A1 100%);
}
.gradient3 {
background-image: linear-gradient(left, #00E4FF 0%, #69FF97 100%);
background-image: linear-gradient(left, #00E4FF 0%, #69FF97 100%);
background-image: linear-gradient(to right, #00E4FF 0%, #69FF97 100%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.