• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Кнопка с указателем при наведении на CSS (Выдвижная кнопка с показам стрелки при помощи CSS)
Кнопка с указателем при наведении на CSS
Kosten
Дата: Четверг, 2019-08-01, 22:16 | Сообщение 1
Администраторы
Сообщений:24295
Награды: 56


Интересный эффект своим обзором, так как кнопка создана полностью на чистых стилях, где совершенно не сложный, но по своим характеристикам ее можно установить на многие тематические сайты. Так как она идет на градиентах и имеет несколько оттенков.

Но главное считаю это эффект, где изначально видим название ключевого слова, но стоит навести, как по правую сторону покажется стрелка. Не стесняйтесь настраивать и изменять эти кнопки по своему усмотрению.

Помните, что добавление стильных кнопок 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;
}


Здесь у нас есть простая кнопка в градиентных цветах, где при наведении курсора кнопка переходит в анимированные стрелки, которые появляются в кнопке.

Демонстрация
Прикрепления: 4336633.png(13.3 Kb) · 4799940.png(13.7 Kb) · msadehdsan.zip(2.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Кнопка с указателем при наведении на CSS (Выдвижная кнопка с показам стрелки при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: