Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Fun with Button Rollover Effects

Adding a rollover effect to your buttons provides a more interactive user experience and has statistically driven more conversions than static buttons.

Adding a rollover effect to your buttons is an indication to the user that the browser is aware of the position of their cursor and can drive action and conversions accordingly. In this tutorial, Solodev provides you with the resources you need to add a rollover effect to elements on your website.

Step 1 - Add the HTML below to your webpage

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

Step 2 - Add the CSS below to the main stylesheet of your website.

.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 {
  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;
}
img {
  vertical-align: middle;
}
.item h2 {
  margin-top: 20px;
  color: #414141;
  font-weight: 100;
}
.item p {
  margin-bottom: 25px;
  color: #414141;
}

Step 3 - Add the includes below to your web page

<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">

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev