В материале представлен привлекательных эффект, который полностью работает при помощи чистого CSS, где при наведении вы увидите красивое изменение элемента. В сети интернет можно много найти различных вариантов с эффектом изменение кнопки при наведении. Но здесь мы создадим кнопку, где будет измениться дизайн, но главное также название, которое прокручивается, что смотрится красиво.
На любом формате, будь это сайт или блог, эту кнопку можно применять. Она по ширине ставится автоматически, это зависит от количества знаков, которые находятся по вверх. По палитре цвета идет полностью в светлом стиле, что говорит о том, где самому веб разработчику при помощи стилистике не сложно изменить оттенок цвета.
Весь стиль дизайна строится на одном классе, что задается в коде, и на нем уже выстраиваем полностью стилистику, что можно посмотреть, как идет изначально.
Здесь немного переделано, а добавлен обвод и сменена палитра цвета на темный фон.
Приступаем к установке:
HTML
Код
<button class="kavepug-mikalen" data-text="Кнопка для сайта Zornet.Ru">
<span>Кнопка для сайта Zornet.Ru</span>
</button>
CSS
Код
.kavepug-mikalen {
position: relative;
height: 48px;
line-height: 48px;
padding: 0 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: #0f454e;
border-radius: 50px;
color: #ececec;
outline: 0;
overflow: hidden;
text-transform: uppercase;
cursor: pointer;
letter-spacing: .1em;
font-weight: bold;
transition: all .4s ease;
border: 2px solid #a7a8ab;
}
.kavepug-mikalen span {
display: block;
height: 48px;
line-height: 48px;
}
.kavepug-mikalen:after {
content: attr(data-text);
display: block;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
transform: translateY(100%);
}
.kavepug-mikalen:after, .kavepug-mikalen span {
transition: all .45s cubic-bezier(0.83,.01,.29,.99);
}
.kavepug-mikalen:hover {
box-shadow: 0 0.4375rem 2.25rem rgba(224, 219, 219, 0.26);
background: #1a4c71;
color: #f8fafb;
}
.kavepug-mikalen:hover span {
opacity: 0;
transform: translateY(-100%);
}
.kavepug-mikalen:hover:after {
opacity: 1;
transform: translateY(0%);
}
Теперь вы самостоятельно ставите те знаки, что возможно подключить шрифтовые иконки, которые оригинально смотрятся и безусловно подойдут под различный формат.
Демонстрация
