Bootstrap Snippet 3d button using HTML CSS

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.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="header">
    <h1>Gradient Buttons</h1>
</div>
<div class="content">
  
  <h2>Colors</h2>
  <ul class="color">
    <li class="green"></li>
    <li class="blue"></li>
    <li class="red"></li>           
    <li class="purple"></li>
    <li class="cyan"></li>
    <li class="yellow"></li>
  </ul>
    <div class="container">
        <h2>mini</h2>
        <a href="#" class="btn-gradient cyan mini">Button</a>
        <a href="#" class="btn-gradient orange mini">Button</a>
        <a href="#" class="btn-gradient blue mini">Button</a>
        <a href="#" class="btn-gradient purple mini">Button</a>
        <a href="#" class="btn-gradient green mini">Button</a>
        <a href="#" class="btn-gradient yellow mini">Button</a>
        <a href="#" class="btn-gradient red mini">Button</a>
        <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red mini"</span>>Button</<span class="anc">a</span>></pre>
    </div>
    <div class="container">
        <h2>small</h2>
        <a href="#" class="btn-gradient cyan small">Button</a>
        <a href="#" class="btn-gradient orange small">Button</a>
        <a href="#" class="btn-gradient blue small">Button</a>
        <a href="#" class="btn-gradient purple small">Button</a>
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
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: #eaedf1;
    font-family: 'Lato', sans-serif;
}
.header {
    background: white;
    padding: 30px;
    text-align: center;
}
.header h1 {
    font-weight: 300;
    display: inline;
}
h2 {
    color: #89867e;
    text-align: center;
    font-weight: 300;
}
.color {
    width: 350px;
    margin: 0 auto;
}
.color li {
    margin: 0 15px 0 0;
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 100%;
}
.color .red    {background: #fa5a5a;}
.color .yellow {background: #f0d264;}
.color .green  {background: #82c8a0;}
.color .cyan   {background: #7fccde;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3d button"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"3d button" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"3d button"
Bootstrap 3.0.0 Snippet by evarevirus