« CSS кнопка с эффектом скольжения вниз »
Сегодня мы научимся создавать CSS кнопку с эффектом скольжения вниз. Другими словами, текст скользит по мышке, используя чистый CSS и HTML. Этот эффект подобен механическому счетчику, который сдвигает текст вниз и показывает его сверху.
Для создания этого эффекта мы использовали только CSS, там нет JavaScript или какой-либо другой библиотеки. Я думаю, что эта программа лучше всего подойдет для вас, если вы новичок. Если вы сейчас думаете, каков на самом деле этот эффект при наведении мышки, посмотрите предварительный просмотр ниже, перейдя по ссылке Демонстрация.
HTML код:
CSS код:
[class*="button-"] {
position: relative;
display: inline-block;
overflow: hidden;
float: none;
margin: 0 auto;
padding: 0 4em;
height: 3.5em;
font: 600 1em/3.6em "Cuprum", sans-serif;
text-transform: uppercase;
font-size: 16px;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
letter-spacing: 0.08em;
color: #393939;
background: #f3be81;
border: solid 1px #fff;
border-radius: 2px;
-moz-transition: ease 0.35s all;
-o-transition: ease 0.35s all;
-webkit-transition: ease 0.35s all;
transition: ease 0.35s all;
}
.button:hover,
[class*="button-"]:hover {
background: #f7ae59;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
}
.button-hover:hover {
line-height: 9em;
}
.button-hover:before {
content: attr(data-text);
color: #393939;
position: absolute;
top: -2.75em;
}
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |