Интересный эффект своим обзором, так как кнопка создана полностью на чистых стилях, где совершенно не сложный, но по своим характеристикам ее можно установить на многие тематические сайты. Так как она идет на градиентах и имеет несколько оттенков.
Но главное считаю это эффект, где изначально видим название ключевого слова, но стоит навести, как по правую сторону покажется стрелка. Не стесняйтесь настраивать и изменять эти кнопки по своему усмотрению.
Помните, что добавление стильных кнопок CSS на ваш сайт очень просто, где нужно проверить, какие кнопки на ваших страницах работают лучше всего, чтобы повысить конверсию
1.
2.
HTML
Код
<a class="loizcong-uenoneb" href="http://zornet.ru/load/142" target="_blank" rel="nofollow"><span>ZorNet.Ru: портал для вебмастера</a>
CSS
Код
.loizcong-uenoneb {
border-radius: 4px;
background: linear-gradient(to right, #bb1d83, #1d6b90) !important;
border: none;
color: #f3eaea;
text-align: center;
text-transform: uppercase;
font-size: 21px;
padding: 18px;
width: 215px;
transition: all 0.4s;
cursor: pointer;
margin: 3px;
}
.loizcong-uenoneb span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.4s;
}
.loizcong-uenoneb span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.loizcong-uenoneb:hover span {
padding-right: 25px;
}
.loizcong-uenoneb:hover span:after {
opacity: 1;
right: 0;
}
Здесь у нас есть простая кнопка в градиентных цветах, где при наведении курсора кнопка переходит в анимированные стрелки, которые появляются в кнопке.
Демонстрация
