How to create button hover effects

      No Comments on How to create button hover effects

How to create button hover effects using CSS animations- CSS only



How to create button hover effects – CSS

Button 1

Style to add background color to button, setting color, border, margin, padding properties.

.scanfcode
{
  background-color:#ff5050;
  padding:10px;
  border:0px;
  color:#fff;
  font-family: 'BenchNine', Arial, sans-serif;
  font-size:20px;
  margin:10px 40px;
  position:relative;
  text-transform:uppercase;
}

Setting the :before and :after properties.

.scanfcode:before,
.scanfcode:after {

/* setting position of content in before and after */
  position: absolute;

/* border properties*/
  border-color: #ff5050;
  border-style: solid;
  border-width: 0; 

/* transition properties */
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
 
/* to set content before and after the button to null */
  content:"";

/* sets the height and width of the button */
  height: 24px;
  width: 24px;
}

.scanfcode:before {

/* border to appear at the top-left corner */
  border-left-width: 2px;
  border-top-width: 2px;

/* setting position of the border */
  left: -5px;
  top: -5px;
}

.scanfcode:after {

/* border to appear at the bottom-right corner */
  border-bottom-width: 2px;
  border-right-width: 2px;


/* setting position of the border */
  bottom: -5px;
  right: -5px;
}

The hover effect

.scanfcode:hover:before,
.scanfcode:hover:after
{
  height:100%;
  width:100%;
}

Button 2

Setting style for the button

.scanfcode2
{
  /* background none*/
  background-color:transparent;
  border:0px;
  padding:10px 20px;
  color:#003399;
  position:relative;
  font-family: 'BenchNine', Arial, sans-serif;
  font-size:26px;
  margin:10px 40px;
  position:relative;
  text-transform:uppercase;
  
}

Styling the :before and :after

.scanfcode2:before,
.scanfcode2:after
{
  position:absolute;
  height: 40px;
  width: 40px;

/* border properties */
  border-color: #333;
  border-style: solid;
  border-width: 0;

/* setting the transition */
  -webkit-transition: all 0.25s;
  transition: all 0.25s;

/* setting content to null */
  content:"";

}
.scanfcode2:before
{
  /* sets the left border for :before */
  border-left-width:2px;
 
 /* positioning the border */
  left:-6px;
  top:6px;
}
.scanfcode2:after
{
   /* sets the right border for :after */
  border-right-width:2px;

  /* positioning the border */
  right:-6px;
  top:6px;
}

Hover effect

.scanfcode2:hover:before,
.scanfcode2:hover:after
{
  /* sets the top border width to 2px*/
  border-top-width:2px;
  /* sets the left border width to 0px */
  border-left-width:0px;
  /* sets the bottom border width to 2px */
  border-bottom-width:2px;
  /* sets the right border width to 0px*/
  border-right-width:0;

  /* setting border color */
  border-color:#003399;

 /* setting the position of the border to appear */
  top:-3px;
  bottom:-3px;

 /* setting width of :before and :after to full */
  width:100%;
  height:100%;
}

How to create button hover effects -HTML:

<button class="scanfcode">Read More</button>
<button class="scanfcode2">Like us </button>

Edit on Codepen

See the Pen Button hover effects CSS only by scanfcode (@scanfcode) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *