Как сделать красивый переход при наведении на кнопку CSS

Как сделать красивый переход при наведении на кнопку CSS

В этом уроке вы узнаете, как сделать красивый переход при наведении на кнопку с помощью CSS. 

Пример:


Код HTML:

<a href="">

<span>

<em>Скачать</em>

<i class="fa fa-cloud-download"></i>

</span>

</a>

Код CSS:

a {

text-decoration: none;

font-family: 'Open Sans', sans-serif;

text-align: center;

color: white;

position: relative;

background: #3C4896;

display: block;

width: 200px;

height: 50px;

border-radius: 50px;

border: 2px solid transparent;

margin: 80px auto 0;

}

a:hover {

background: white;

border: 2px solid #3C4896;

}

span {

overflow: hidden;

}

span, em, i.fa {

position: absolute;

left: 0;

width: 100%;

height: 100%;

line-height: 46px;

}

em {

top: 0;

font-style: normal;

}

i.fa {

top: 100%;

font-size: 30px;

color: #3C4896;

}

a:hover em {

top: -100%;

}

a:hover i.fa {

top: 0;

}

a:before, a:after{

position: absolute;

opacity: 0;

visibility: hidden;

}


a:hover:before, a:hover:after {

opacity: 1;

visibility: visible;

transition: .2s ease-in-out .4s;

}

a:hover:before {

bottom: 70px;

}

a:hover:after {

bottom: 50px;

}

Отправить комментарий

Новые Старые

نموذج الاتصال