Bootstrap Snippet button hover effect 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 ---------->
<div id="container">
          <h2 class="ayush">AYUSH THAKUR</h2>
  <div class="button-1">
    <div class="eff-1"></div>
    <a href="#"> Read more </a>
  </div>
  <div class="button-4">
    <div class="eff-4"></div>
    <a href="#"> Read more </a>
  </div>
  <div class="button-2">
    <div class="eff-2"></div>
    <a href="#"> Read more </a>
  </div>
  <div class="button-3">
    <div class="eff-3"></div>
    <a href="#"> Read more </a>
  </div>
  <div class="button-5">
    <div class="eff-5"></div>
    <a href="#"> Read more </a>
  </div>
  <div class="button-6">
    <div class="eff-6"></div>
    <a href="#"> Read more </a>
  </div>
  <div class="button-7">
    <div class="eff-7"></div>
    <a href="#"> Read more </a>
  </div>
  <div class="button-8">
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
*{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
body{background-image: -ms-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: -moz-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: -o-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(255,183,107,1)), color-stop(50, rgba(255,167,61,1)), color-stop(51, rgba(255,124,0,1)), color-stop(100, rgba(255,127,4,1)));
background-image: -webkit-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: linear-gradient(to bottom left, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);background-repeat: no-repeat;}
#container{
  width:715px;
  height:230px;
  margin:50px auto;
}
.ayush {
    color: red;
    text-align: center;
    width: 100%;
    font-size: 35px;
    position: relative;
    top: -39px;
    left: -52px;
    text-shadow: 2px 2px 1px yellow;
}
.button-1{
  width:140px;
  height:50px;
  border:2px solid #34495e;
  float:left;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"button hover effect"
Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"button hover effect" Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"button hover effect"
Bootstrap 4.1.1 Snippet by ishu511