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

Шаг 1 — Добавьте приведенный ниже HTML-код на свою веб-страницу.

<div class="background">
<div class="container">
<div class="item education">
   <i class="fa fa-gift fa-3" aria-hidden="true"></i>
   <h3>
      You Have Rewards Available!
   </h3>
   <p>
      Hover over the button below and watch the rollover effect!
   </p>
   <a class="btn btn-green" href="">Learn more</a>
</div>
</div>
</div>

Шаг 2 — Добавьте приведенный ниже CSS в основную таблицу стилей вашего веб-сайта.

.background {
  background-color: #808080;
}
.btn-green {
    color: #fff;
    background-color: #8ec449;
    border-color: #66912f;
}
.btn {
    padding: 8px 28px;
    font-weight: 400;
    -webkit-transition: background .3s ease-in;
    transition: background .3s ease-in;
    white-space: normal;
    border-width: 0 0 1px;
}
.btn-green:hover {
   color: #fff;
   background-image: url(https://www.solodev.com/assets/btn-rollover/button-rollover-hover-2.png);
   background-position: right bottom;
   font-weight: 700;
}
a, a:hover {
    color: #f04e23;
}
.btn, .btn-lg, .btn-sm, .btn-xs {
    border-radius: 3px;
}
.item {
    margin-top: 25px;
    background: #fff;
    border: 1px solid #e7e9e9;
    border-bottom-color: #dcdede;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(50,50,50,.05);
    -moz-box-shadow: 0 1px 1px 0 rgba(50,50,50,.05);
    box-shadow: 0 1px 1px 0 rgba(50,50,50,.05);
    padding: 50px 40px;
    position: relative;
    margin-bottom: 2em;
    text-align: center;
}
.fa {
  font-size: 38px;
}
a, a:hover {
    color: #f04e23;
}
.h1, body, h1, h2, h3, h4, h5, h6, html {
    font-weight: 300;
}
img {
    vertical-align: middle;
}
.item h3 {
    margin-top: 20px;
    color: #414141;
    font-weight: 100;
}
.item p {
    margin-bottom: 25px;
    color: #414141;
}

Шаг 3 — Добавьте приведенные ниже элементы на свою веб-страницу.

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Демо на JSFiddle

Скачать с GitHub

Первоначально опубликовано здесь, в блоге Solodev Web Design

Получайте ежедневные учебные пособия по веб-дизайну на свой почтовый ящик, подписавшись на блог Solodev на странице solodev.com/blog/!

Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.