Сегодняшний наш урок будет посвящён CSS3, и мы поговорим о том, как можно воспользоваться эффектом hover для того чтобы создать интересные кнопки.
Давайте начнём с html. Прошу обратить внимание, что мы используем атрибут data-title - данное значение будет отображаться на самой кнопке.
<a class="ph-button" href="#" data-title="Free download">
<span>
<span>Free download</span>
</span>
</a>
Идея в том, что после наведения мыши, фон кнопки должен измениться, причём для этого должна использоваться приятная анимация. Мы воспользуемся псевдо классом :after, а контент будем брать из соответствующих аттрибутов data-...
Код с браузерными префиксами, вы можете найти в исходниках.
.button {
display: block;
position: relative;
height: 3.4em;
width: 10em;
margin: .7em auto;
overflow: hidden; }
.button > span {
display: block;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
width: 0%;
height: 100%;
transition: 1s ease-in-out; }
.button:after, .button > span > span {
display: block;
text-align: center;
border-radius: 0.625em;
padding: 1em 0; }
.button:after {
content: attr(data-title);
width: 100%;
background: #4186b2;
color: #67d6c1; }
.button > span > span {
width: 10em;
background: #67d6c1;
color: #4186b2; }
.button:hover > span {
width: 100%; }
Для вертикальной смены фона кнопку, воспользуйтесь следующим кодом:
.button > span {
..
width: 100%;
height: 0%;
.. }
.button:hover > span {
height: 100%; }
Вот и всё!