"bull botton"
Bootstrap 3.3.0 Snippet by evarevirus

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="//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 ---------->
<header class="header">
<h1>Bubble Menu</h1>
<p>Categories menu resizing with font-size</p>
</header>
<section class="section">
<h2>16px <span>Size: default | Hover: rounded</span></h2>
<div class="menu l-rounded">
<ul>
<li>
<a href="#" class="icon fa fa-music">
<span>Music</span>
</a>
</li>
<li>
<a href="#" class="icon fa fa-cloud">
<span>Cloud</span>
</a>
</li>
<li>
<a href="#" class="icon fa fa-shopping-bag">
<span>Shopping</span>
</a>
</li>
<li>
<a href="#" class="icon fa fa-automobile">
<span>Auto</span>
</a>
</li>
<li>
<a href="#" class="icon fa fa-rocket">
<span>Tech</span>
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(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Montserrat:400,700);
*, *:before, *:after {
box-sizing: border-box;
}
body {
font: 300 18px "Roboto Condensed", "Arial Narrow", Arial;
text-align: center;
color: #999;
padding: 50px 10px;
background: #eee;
}
.header, h1, h2 {
font-family: "Montserrat", Arial;
}
h1, h2:first-line {
color: #000;
}
h1 {
font-size: 32px;
text-transform: uppercase;
letter-spacing: 3px;
padding-bottom: 10px;
text-shadow: 4px 9px 0 rgba(0, 0, 0, 0.1);
}
h2 {
padding: 30px 0 10px;
}
h2 span {
display: block;
padding-top: 10px;
font: 400 14px/1.6 "Roboto Condensed", "Arial Narrow", Arial;
text-transform: uppercase;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page

Questions / Comments: