<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;
position: relative;
z-index: 2;
will-change: transform, filter;
transform-style: preserve-3d;
transition: all .3s ease-out;
}
.btn:hover {
transform: scale(0.95);
}
.btn::before {
content: "";
height: 40px;
display: inline-block;
position: absolute;
left: 30px;
right: 30px;
bottom: -5px;
z-index: -1;
border-radius: 50px;
opacity: .8;
filter: blur(15px);
transform-style: preserve-3d;
transition: all .3s ease-out;
}
.btn:hover::before {
bottom: 0;
filter: blur(8px);
}
.gradient1,
.gradient1::before {
background: linear-gradient(left, #0396FF 0%, #ABDCFF 80%, #ABDCFF 100%);
background: linear-gradient(left, #0396FF 0%, #ABDCFF 80%, #ABDCFF 100%);
background: linear-gradient(to right, #0396FF 0%, #ABDCFF 80%, #ABDCFF 100%);
}
.gradient2,
.gradient2::before {
background: linear-gradient(left, #E96D71 0%, #FAD7A1 80%, #FAD7A1 100%);
background: linear-gradient(left, #E96D71 0%, #FAD7A1 80%, #FAD7A1 100%);
background: linear-gradient(to right, #E96D71 0%, #FAD7A1 80%, #FAD7A1 100%);
}
.gradient3,
.gradient3::before {
background: linear-gradient(left, #32CCBC 0%, #90F7EC 80%, #90F7EC 100%);
background: linear-gradient(left, #32CCBC 0%, #90F7EC 80%, #90F7EC 100%);
background: linear-gradient(to right, #32CCBC 0%, #90F7EC 80%, #90F7EC 100%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.