"jQuery Fade Button"
Bootstrap 3.3.0 Snippet by krystenhalvorsen

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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><br/><strong>Click Me!</strong></div>
</div><!--ends row-->
</div><!--ends container-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #B378D3;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 1;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
$('div').mouseenter(function() {
$('div').fadeTo('fast', 0.5);
});
$(document).ready(function(){
$('div').mouseleave(function(){
$('div').fadeTo('slow', 1);
});
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
Hexa shape button
Loading Button
Material toggle button

Questions / Comments: