"Stylish button"
Bootstrap 3.3.0 Snippet by srrkit

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/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 ---------->
<body>
<div class="container">
<center>
<h2>Download full source code</h2>
</center>
<section class="color-pattern-1">
<div>
<button class="button button-1 button-1a">Button</button>
<button class="button button-1 button-1b">Button</button>
<button class="button button-1 button-1c">Button</button>
</div>
<div>
<button class="button button-1 button-1d">Button</button>
<button class="button button-1 button-1e">Button</button>
<button class="button button-1 button-1f">Button</button>
</div>
</section>
<section class="color-pattern-2">
<div>
<button class="button button-2 button-2a">Button</button>
<button class="button button-2 button-2b">Button</button>
</div>
<div>
<button class="button button-2 button-2c">Button</button>
<button class="button button-2 button-2d">Button</button>
</div>
<div>
<button class="button button-2 button-2e">Button</button>
<button class="button button-2 button-2f">Button</button>
</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
/* General Style */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Roboto', Calibri, Arial, sans-serif;
color: #89867e;
background: #fff;
}
a {
color: #888;
text-decoration: none;
}
a:hover,
a:active {
color: #333;
}
/* Header Style */
.main,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

hi how can I add just a heart icon like "button 3c" to my button?

YassirRabiea () - 8 years ago - Reply 0