Build CSS Button Hover effect Collection

Who doesn’t like styling buttons and hover effects using CSS? A button means action. Clicking or tapping on one lets you do things. HTML buttons are an essential element of interaction design. That’s why they’re so important and that’s why it’s good to get them right.

HTML Code:

I’m using Bootstrap for Column And Button

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

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

*, 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%;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply