CSS hover Effects | Button hover effects css

css hover effects
css hover effects
css hover effects

Hello Friends today in this article we will learn how to create diffrent type of CSS hover effect .

Hover Rotating Icons

How to rotate fontaswome icons on hover …when you mouse over the div then icons will be rotate 360 deg .

<div class="wrapper">
   <div class="effect1">
      <div class="icon"><i class="fa fa-home"></i></div>
      <div class="txtbox">HOME</div>
   </div>
   
   <div class="effect1">
      <div class="icon"><i class="fa fa-telegram"></i></div>
      <div class="txtbox">TELEGRAM</div>
   </div>
   
 </div>
<style type="text/css">
    .effect1
{
	float:left;
	margin-left:10px;
	width:auto;
	height:100px;
	padding-left:20px;
	padding-right:2
	cursor:pointer;
	border-radius:7px;
	background:#fff;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
-moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
transition: all ease-in-out 0.3s;
}


.icon 
{ 
  position:relative;
  float:left;
  margin-top:10px; 
  color:#fff; 
  width:40px; 
  height:40px; 
  top:20px;
  background:#03112c; 
  font-size:25px; 
  border-radius:100%; 
  transition: all ease-in-out 0.8s;
}

.icon i 
{
	position:absolute; 
	left:50%; 
	top:50%; 
	transform:translate(-50%,-50%);
	color:#fff;
	transition: all ease-in-out 0.3s;
}



.txtbox
{
	float:left;
	margin-left:20px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:22px;
	line-height:100px;
}

.effect1:hover .icon 
{
	background:none;
	border:1px dashed #03112c;
	animation: circle 5s linear infinite;
}

.effect1:hover .icon i 
{
	color:#03112c;
}


@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

</style>

Change Border-Radius Direction on Hover

Here on mouse over on div the direction of Border Radius will be change.

 <div class="wrapper">
   <div class="effect2">
      <div class="txtbox2">HOME</div>
   </div>
   
    <div class="effect2">
      <div class="txtbox2">ABOUT US</div>
   </div>
   
    <div class="effect2">
      <div class="txtbox2">SERVICES</div>
   </div>
   
 </div>
<style type="text/css">
    
    .effect2
{
	float:left;
	margin-left:10px;
	width:auto;
	height:100px;
	padding-left:20px;
	padding-right:20px;
	cursor:pointer;
	border-radius:0px 30px 0px 30px;
	background:#fff;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
-moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
transition: all ease-in-out 0.3s;

}

.effect2:hover
{
	border-radius:30px 0px 30px 0px;
}
</style>

Image Zoom Effect On Hover Using CSS

here the image will zoom on mouse over.

 <div class="wrapper">

   <div class="effect3">
     <div class="imagezoom">
       <img src="1.jpg" />
     </div>
   </div>
   
    <div class="effect3">
      <div class="imagezoom">
       <img src="2.jpg" />
     </div>
   </div>
   
   
 </div>
<style type="text/css">
   
   .effect3
{
	float:left;
	margin-left:10px;
	cursor:pointer;
		-webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
-moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
box-shadow: 0px 0px 20px 0px rgba(184,184,184,1);
transition: all ease-in-out 0.3s;
overflow:hidden;
	
}

.effect3 img
{
	width:200px;
	height:120px;
}



.effect3:hover .imagezoom
{
	-webkit-transform: scale(1.5);
    transform: scale(1.5);
}

.imagezoom {
  width: 100%;
  height: 100%;
  transition:all ease-in-out 0.3s;
  cursor:pointer;
}

   
</style>

Leave a Reply

avatar
  Subscribe  
Notify of