Buils CSS Hover effect Collection || 10 Tutorial

Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Credits A big thanks to following source. team slider add-on wouldn’t be possible without these source. •Bootstrap. 

  • 10 Unique Styles * More Style Coming Soon!
  • Smooth hover effect
  • Fully Customization
  • Unlimited Color Style
  • All Browser Supported
  • Clean Coding

HTML Code:

Bootstrap CDN 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

Basic Code 

<div class="container">
<div class="row">
<div class="col-3">
<a href="https://www.deshamarbd.com/" class="btn link1">left</a>
</div>
<div class="col-3">
<a href="https://www.deshamarbd.com/" class="btn link2">right</a>
</div>
<div class="col-3">
<a href="" class="btn link3">top</a>
</div>
<div class="col-3">
<a href="https://www.deshamarbd.com/" class="btn link4">bottom</a>
</div>
</div>
<div class="row">
<div class="col-3">
<a href="https://www.deshamarbd.com/" class="btn link5">left top</a>
</div>
<div class="col-3">
<a href="https://www.deshamarbd.com/" class="btn link6">right top</a>
</div>
<div class="col-3">
<a href="https://www.deshamarbd.com/" class="btn link7">left bottom</a>
</div>
<div class="col-3">
<a href="" class="btn link8">right bottom</a>
</div>
</div>
<div class="row">
<div class="col-6">
<a href="https://www.deshamarbd.com/" class="btn link9">left right dubble</a>
</div>
<div class="col-6">
<a href="https://www.deshamarbd.com/" class="btn link10">up down dubble</a>
</div>
</div>
</div>

CSS Code:

Basic Code: 

*, html{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  margin: 20px auto;
}
.row {
  text-align: center;
}
a.btn{
  border: 1px solid #008ff8;
  margin-top: 20px;
  width: 100%;
}

Animation 10 style 

*, html{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  margin: 20px auto;
}
.row {
  text-align: center;
}
a.btn{
  border: 1px solid #008ff8;
  margin-top: 20px;
  width: 100%;
}

.link1{
  position: relative;
}
.link1:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link1:hover:before{
  width: 100%;
}

.link2{
  position: relative;
}
.link2:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link2:hover:before{
  width: 100%;
}

.link3{
  position: relative;
}
.link3:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link3:hover:before{
  height: 100%;
}

.link4{
  position: relative;
}
.link4:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link4:hover:before{
  height: 100%;
}

.link5{
  position: relative;
}
.link5:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link5:hover:before{
  width: 100%;
  height: 100%;
}

.link6{
  position: relative;
}
.link6:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link6:hover:before{
  width: 100%;
  height: 100%;
}


.link7{
  position: relative;
}
.link7:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link7:hover:before{
  width: 100%;
  height: 100%;
}


.link8{
  position: relative;
}
.link8:before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link8:hover:before{
  width: 100%;
  height: 100%;
}


.link9{
  position: relative;
}
.link9:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link9:hover:before{
  width: 100%;
}
.link9:after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link9:hover:after{
  width: 100%;
}


.link10{
  position: relative;
}
.link10:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link10:hover:before{
  height: 100%;
}
.link10:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link10:hover:after{
  height: 100%;
}

See the Pen CSS Hover effect Collection by Rashedul Hasan (@rhsuman) on CodePen.