"Buttons-hover with colors"
Bootstrap 3.1.0 Snippet by benjaminb10

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
<h3>You can go hover those buttons</h3>
<a href="#" class="btn btn-lg btn-hover btn-default">Large</a>
<a href="#" class="btn btn-md btn-hover btn-default">Medium</a>
<a href="#" class="btn btn-sm btn-hover btn-default">Small</a>
<a href="#" class="btn btn-xs btn-hover btn-default">Xsmall</a>
<hr>
<h3>Oh, it also work with bootstrap colors</h3>
<a href="#" class="btn btn-md btn-hover btn-default">Default</a>
<a href="#" class="btn btn-md btn-hover btn-primary">Primary</a>
<a href="#" class="btn btn-md btn-hover btn-info">Info</a>
<a href="#" class="btn btn-md btn-hover btn-warning">Warning</a>
<a href="#" class="btn btn-md btn-hover btn-danger">Danger</a>
<a href="#" class="btn btn-md btn-hover btn-success">Success</a>
<hr>
<h3>Eventually, it's nice with icons</h3>
<a href="#" class="btn btn-sm btn-hover btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span></a>
<a href="#" class="btn btn-sm btn-hover btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></a>
<a href="#" class="btn btn-sm btn-hover btn-success"><span class="glyphicon glyphicon-check"></span></a>
<a href="#" class="btn btn-xs btn-hover btn-default">Print <span class="glyphicon glyphicon-print"></span></a>
<hr>
</div>
</div>
<div style="background:#333">
<div class="container">
<div class="row">
<h3 style="color:#fff">And it works with dark backgrounds : use -alt to display it white</h3>
<a href="#" class="btn btn-lg btn-hover-alt btn-primary">Hey baby</a>
<a href="#" class="btn btn-sm btn-hover-alt btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></a>
<a href="#" class="btn btn-xs btn-hover-alt btn-default">Print <span class="glyphicon glyphicon-print"></span></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.btn-hover {
font-weight: normal;
color: #333333;
cursor: pointer;
background-color: inherit;
border-color: transparent;
}
.btn-hover-alt {
font-weight: normal;
color: #ffffff;
cursor: pointer;
background-color: inherit;
border-color: transparent;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

These are awesome... Please do the same with custom colors

Raymond () - 11 years ago - Reply 0


Ok, I'll try when I'll have a bit more time ;)

benjaminb10 () - 11 years ago - Reply 0


I'm waiting for validation of my snippets. HTML and CSS are both simplified.
I think that you will like that !

benjaminb10 () - 11 years ago - Reply 0


Can you please update the existing snippet instead of submitting a new one? It seems that the two have very similar functionality so I think combining them in one snippet would be better.
Thank you for submitting!

maxsurguy () - 11 years ago - Reply 0


The thing is that I improved it a bit, the html and the css are totally different and the screenshot will not be good now.
What do you think ?

benjaminb10 () - 11 years ago - Reply 0


I can easily redo the screenshot :)
Just let me know when you want me to do that.

maxsurguy () - 11 years ago - Reply 0


Done ;-)

benjaminb10 () - 11 years ago - Reply 0


New screenshot done too! Thanks for editing this snippet.

maxsurguy () - 11 years ago - Reply 0