Ultimate hover effects by css3

button hover effects

I share with you button or link hover effects using css3 pseudo selectors(:before & :after) with the transition effects. You can see change background color and text on hover. Only we use :before and :after pseudo selectors to create awesome or ultimate looking hover effects.

Simple one button hover effect example –

HTML –

<button class="b1">Touch Me</button>

CSS3 –

button{
  border: 0; 
  font-family: "Open Sans"; 
  font-weight: 600; 
  padding: 8px 12px; 
  width: 120px; 
  color: #fff; 
  border-radius: 5px; 
  background-color: #DB733B; 
  cursor: pointer; 
  position: relative; 
  z-index: 1;
}
.b1:before{
  content: ""; 
  width: 100%; 
  height: 0; 
  position: absolute; 
  background-color: #3395D0; 
  left: 0; 
  bottom: 0; 
  transition:.4s; 
  z-index: -1;
}
.b1:hover:before{
  height: 100%; 
  bottom: auto; 
  top: 0;
}

Or, see more demo to click demo link.

(Visited 4,151 times, 1 visits today)
One comment
  1. I think this is one of the most important info for me. And i’m glad reading your article. But should remark on few general things, The website style is perfect, the articles is really great : D. Good job, cheers

Add Comment

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