Анимированная кнопка #1
Несложная анимация кнопки на CSS с ховером для практики в верстке
HTML код
<div class="animate-1 button-block">
<button class="btn btn-1">Button text</button>
<button class="btn btn-2">Button text</button>
</div>
CSS код
.animate-1.button-block{
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.animate-1 .animate-btn:not(:last-child){
margin-bottom: 25px;
}
.animate-1 .animate-btn{
position: relative;
border-radius: 3px;
font-weight: bold;
font-size: 25px;
padding: 15px 35px;
cursor:pointer;
color: #fff;
background-color: black;
border: none;
}
.animate-1 .animate-btn:after{
border-radius: 3px;
position: absolute;
content: '';
width: 100%;
height: 0;
left: 0;
background-color: #11A50E;
transition: all 0.3s ease;
z-index: -1;
}
.animate-1 .btn-1:after{
bottom: 0;
}
.animate-1 .btn-2:after{
top: 0;
}
.animate-1 .animate-btn:hover{
z-index: 0;
}
.animate-1 .animate-btn:hover:after{
height: 100%;
}