Bootstrap Snippet button hover using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        
        
    <div class='box foo'>sumit</div>
<div class='box bar'>kumar</div>
<div class='box curmudgeon'>sumi9xm@gmail.com</div>
    </div>
</div>
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
body {
  background-color: #3FB;
  text-align: center;
  line-height: 100vh;
}
.box {
  position:relative;
  vertical-align: middle;
  color: #0b7;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  text-align: center;
  transition: 0.5s;
  padding: 0 20px;
  cursor: pointer;
  border: 2px solid #0b7;
  -webkit-transition:0.5s;
}
.box:hover {
  border: 2px solid rgba(0,160,80,0);
  color: #FFF;
}
.box::before, .box::after {
  width: 100%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  top:0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"button hover"
Bootstrap 3.0.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"button hover" Bootstrap 3.0.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"button hover"
Bootstrap 3.0.0 Snippet by sumi9xm