"Creative Button Styles (Codrops)"
Bootstrap 3.0.3 Snippet by xewl

Post to Facebook Tweet this

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.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
<div class="container">
<div class="row">
<div class="page-header">
<h1 class="page-title">Creative Button Styles</h1>
<h2 class="page-subtitle">Modern and subtle styles & effects for buttons (hover and click) <span class="for-bs">for Bootstrap</span></h2>
<p>The purpose of this snippet is being able to use the styling from <a href="http://tympanus.net/codrops/2013/06/13/creative-button-styles/" target="_blank">this CoDrops article</a> as an extension to Bootstrap.</p>
<p>I take no credit for the original work! · I'm happy with a tweet/share though!'</p>
</div>
</div>
</div>
</header>
<div class="box">
<div class="container">
<div class="row button-showcase">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-lg btn-block btn-default">Default Button</button>
</div>
</div>
</div>
</div>
<div class="box color-1">
<div class="container">
<h3>Effect 1 · Background Color Animation</h3>
<div class="row button-showcase">
<div class="col-md-4">
<button class="btn btn-lg btn-default btn-effect btn-effect1 btn-effect1a"><span class="icon glyphicon glyphicon-home"></span>Home</button>
<code>btn-effect btn-effect1 btn-effect1a</code>
</div>
<div class="col-md-4">
<button class="btn btn-lg btn-primary btn-effect btn-effect1 btn-effect1b"><span class="icon glyphicon glyphicon-home"></span>Home</button>
<code>btn-effect btn-effect1 btn-effect1b</code>
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
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/*
* General Styling
*/
html { overflow-x: hidden; }
body { background-color: #eee; margin: 0 auto; padding: 0; width: 100%; box-sizing: box-width; }
.icon { margin-right: .3em; -webkit-font-smoothing: antialiased; }
.copy { display: block; margin: 20px auto; text-align: center; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); font-size: 90%; }
.copy a { color: #fff; }
.button-showcase { margin: 20px auto; }
.button-showcase div { padding: 20px 0; text-align: center; }
.page-header { text-align: center; }
.page-header .page-title, .page-header .page-subtitle { color: #aaa; text-shadow: 0 0 2px #fff; font-family: 'Lato', Calibri, Arial, sans-serif; color: #89867e; }
.page-header .page-title { font-weight: 400; }
.page-header .page-subtitle { font-weight: 300; }
.for-bs { font-weight: bold; color: #111; display: block; }
header, footer { display: block; width: 100%; overflow: auto; }
footer { background: #0e83cd; }
.color-1 { background: #0e83cd; }
.color-2 { background: #f06060; }
.color-3 { background: #fcd04b; }
.color-4 { background: #2ecc71; }
.color-5 { background: #9e54bd; }
.color-6 { background: #4593e3; }
.color-7 { background: #2ac56c; }
.color-8 { background: #ecf0f1; }
.color-8 { color: #aaa; font-weight: bold; }
.color-8 .btn { color: #aaa; }
code { position: relative; width: 90%; clear: both; display: block; top: 15px; margin: 0 auto; }
code:after {
content: " ";
position: absolute;
display: block;
bottom: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard PRO React
Card Styles
Creative Princing Table
Hexa shape button

Questions / Comments: