Bootstrap Snippet Anirudha Bhowmik button hover using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  <!--start button hover-->
           <div class="wrapper">
        <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><button type="button" class=" btn--border btn-read btn--animated">READ MORE</button></a>
      </div>
      <!--end button hover-->
      
      
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
      <!--start image overlay-->
       <div class="image">
  <img src="images/tab1.jpg" alt="Avatar" >
  <div class="overlay">
 <div class="text" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i></div>
  </div>
</div><!--image-->
                  <!--start  Modal -->
  <div class="modal fade" id="myModal" role="dialog" style="z-index: 9000;">
     <i class="pull-right" aria-hidden="true" data-dismiss="modal" style=" cursor: pointer;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* start button hover */
.wrapper .btn-read{
 margin:35px 0 0px 18px;
}
.btn-read {
   position: relative;
  display: inline-block;
font-size: 14px;
  padding: 15px 30px;
  overflow: hidden;
  z-index: 1;
    color: #fff;
    background-color: #0d0d0d;
    border: none;
    font-weight: 600;
}
.btn--animated:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 180, 224);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 2s;
  transition-timing-function: ease-out;
  z-index: -1;
}
.btn--animated:hover {
  color: #fff;
}
.btn--animated:hover:before {
  transform: scaleX(1);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Anirudha Bhowmik button hover"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik button hover" Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik button hover"
Bootstrap 4.1.1 Snippet by anirudhabhowmik