<div class="container">
<div class="btn btn1">
<a class="text" href="#">Button</a>
</div>
<div class="btn btn2">
<a class="text2" href="#">Button</a>
</div>
<div class="btn btn3">
<a class="text3" href="#">Button</a>
</div>
<div class="btn btn4">
<a class="text4" href="#">Button</a>
</div>
<div class="btn btn5">
<a class="text5" href="#">Button</a>
</div>
<div class="btn btn6">
<a class="text6" href="#">Button</a>
</div>
<div class="btn btn7">
<a class="text7" href="#">Button</a>
</div>
<div class="btn btn8">
<a class="text8" href="#">Button</a>
</div>
<div class="btn btn9">
<a class="text9" href="#">Button</a>
</div>
<div class="btn btn10">
<a class="text10" href="#">Button</a>
</div>
<div class="btn btn11">
<a class="text11" href="#">Button</a>
</div>
</div>
*,*:before,*:after {
padding: 0;
margin: 0;
box-sizing:border-box;
}
.container {
min-height: 100vh;
position: relative;
background-image: linear-gradient(to right, #ee28ee, #d23cf5, #b449f9,#9352fc, #6c59fc, #4871ff, #2183ff, #0093ff, #00b2ff, #00cdff, #00e5fd, #5ffbf1);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
height: 55px;
width: 140px;
text-align: center;
position: relative;
margin: 50px;
}
a{
text-transform: uppercase;
text-decoration: none;
color:#fff;
font-size: 20px;
letter-spacing: 3px;
text-shadow: 2px 2px 4px #000;
}
/* ===== Button 1 ===== */
.btn1{
width: 100px;
}
.btn1::before,
.btn1::after{
content:"";
width: 0%;
height: 2px;
position: absolute;
background: #000;
transition: width 300ms ease-in;
}
.btn1::before{
bottom: 5px;
left:0px;
}
.btn1::after{
bottom: 10px;
right:0px;
}
.btn1:hover:before,
.btn1:hover:after{
width: 100%;
}
/* ===== Button 2 ===== */
.btn2{
width: 120px;
}
.btn2::before,
.btn2::after{
content:"";
width: 0%;
height: 2px;
position: absolute;
left:0px;
background: #000;
}
.btn2::before{
bottom: 5px;
height: 4px;
transition: width 300ms 150ms ease-in;
}
.btn2::after{
bottom: 12px;
transition: width 300ms ease-in;
}
.btn2:hover:before,
.btn2:hover:after{
width: 100%;
}
/* ===== Button 3 ===== */
.btn3{
width: 120px;
}
.btn3::before{
content:"";
width: 0%;
height: 2px;
position: absolute;
background: #000;
bottom: 5px;
transition: width 300ms ease-in;
}
.btn3:hover:before{
width:100%;
}
/* ===== Button 4 ===== */
.btn4{
width: 120px;
}
.btn4::before{
content:"";
width: 100%;
height: 2px;
position: absolute;
background: #000;
bottom: 5px;
transform:scaleX(0);
transform-origin: left;
}
.btn4:hover:before{
animation: move4 ease-in-out 1s infinite;
}
@keyframes move4 {
0%{
transform:scaleX(0);
}
50%{
transform:scaleX(1);
transform-origin: left;
}
50.1%{
transform-origin: right;
transform:scaleX(1);
}
100%{
transform:scaleX(0);
transform-origin: right
}
}
/* ===== Button 5 ===== */
.btn5{
width: 120px;
}
.text5{
position: relative;
z-index: 10;
color:#fff;
}
.btn5::before{
content:"";
width: 100%;
height: 100%;
position: absolute;
background: #000;
opacity: 0.8;
transform-origin: bottom;
transform:scaleY(0.05);
border-radius: 2px;
}
.btn5:hover:before{
animation: move5 ease-in-out 1.2s infinite;
}
@keyframes move5 {
0%{
transform:scaleY(0.05);
}
50%{
transform:scaleY(1);
transform-origin: bottom;
}
50.1%{
transform-origin: top;
transform:scaleY(1);
}
90%, 100%{
transform:scaleY(0.02);
transform-origin: top;
}
}
/* ===== Button 6 ===== */
.btn6{
width: 120px;
}
.text6{
position: relative;
z-index: 10;
color:#fff;
}
.btn6::before{
content:"";
width: 100%;
height: 16px;
position: absolute;
background: #000;
opacity: 0.8;
transform-origin: bottom;
transform:scaleY(0.1);
border-radius: 2px;
bottom:0px;
}
.btn6:hover:before{
animation: move6 ease 500ms forwards;
}
@keyframes move6 {
0%{
transform:scaleY(0.1);
}
50%{
transform:scaleY(1);
transform-origin: bottom;
}
50.1%{
transform-origin: top;
transform:scaleY(1);
}
90%, 100%{
transform:scaleY(0.1);
transform-origin: top;
}
}
/* ===== Button 7 ===== */
.btn7{
width: 100px;
}
.btn7::before,
.btn7::after{
content:"";
height: 2px;
position: absolute;
background: #000;
transition: width 300ms ease-in;
}
.btn7::before{
bottom: 5px;
right:0px;
width: 100%;
}
.btn7::after{
bottom: 10px;
left:0px;
width:0%;
}
.btn7:hover:before{
width:0%;
}
.btn7:hover:after{
width: 100%;
}
/* ===== Button 8 ===== */
.btn8{
width: 140px;
}
.text8{
transition: transform 200ms ease;
}
.btn8::before{
content:"";
height: 10px;
width: 0%;
left:0px;
top:calc(50% - 4px);
position: absolute;
background: #000;
transition: width 300ms ease-in;
}
.btn8:hover .text8{
transform:scale(1.1);
}
.btn8:hover:before{
width:100%;
}
/* ===== Button 9 ===== */
.btn9{
width: 120px;
}
.text9{
transition: transform 200ms ease;
}
.btn9::after{
content:"";
z-index:2;
height: 3px;
width: 0%;
left:0px;
position: absolute;
background: rgba(0,0,0,0.5);
transition: width 300ms ease-in;
}
.btn9:hover .text9{
transform:scale(1.1);
}
.btn9:hover:after{
width:100%;
}
/* ===== Button 10 ===== */
.btn10{
width: 120px;
}
.text10{
transition: transform 200ms ease-in;
}
.btn10::after{
content:"";
height: 3px;
border-radius: 3px;
width: 100%;
left:0px;
bottom:10px;
position: absolute;
background: rgba(0,0,0,0.3);
transition: height 200ms ease-in, background-color 100ms linear;
}
.btn10:hover:after{
background-color: #000;
height: 8px;
}
.btn10:hover .text10{
transform:translateY(-10px);
}
/* ===== Button 11 ===== */
.btn11{
width: 100px;
}
.text11{
transition: transform 200ms ease-in;
}
.btn11::after{
content:"";
height: 10px;
border-radius: 3px;
width: 100%;
left:0px;
bottom:5px;
position: absolute;
background: #000;
transition: height 200ms ease-in, background-color 100ms linear;
}
.btn11:hover:after{
background-color: #000;
height: 2px;
}
.btn11:hover .text11{
transform:translateY(10px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.