Pages UI
Search…
v5.0.1 - Pages HTML
UI Elements
Form Elements
Buttons
Colors
Pages buttons use the same contextual classes introduced in Bootstrap
1
<button class="btn btn-primary">Primary</button>
2
<button class="btn btn-success">Success</button>
3
<button class="btn btn-complete">Complete</button>
4
<button class="btn btn-info">Info</button>
5
<button class="btn btn-warning">Warning</button>
6
<button class="btn btn-danger">Danger</button>
Copied!
Button animation
Content inside a button can be animate on hover. Simply include the classes
.btn-animated together with .from-top or .from-left to specify the animation direction, You can wish to have any icon you want in side the "hidden-block" div
1
<button
2
aria-label=""
3
type="button"
4
class="btn btn-primary btn-cons btn-animated from-left"
5
>
6
<span>Follow us</span>
7
<span class="hidden-block">
8
<i class="pg-icon">mail</i>
9
</span>
10
</button>
11
<button
12
aria-label=""
13
type="button"
14
class="btn btn-primary btn-cons btn-animated from-top"
15
>
16
<span>Download</span>
17
<span class="hidden-block">
18
<i class="pg-icon">cloud</i>
19
</span>
20
</button>
Copied!
Default Dropdown
Tired of seeing the standard Bootstrap dropdown? Wrap your dropdown toggle button and dropdown menu within
.dropdown-default to get a modern and clean feel
1
<div class="btn-group dropdown-default">
2
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
3
<ul class="dropdown-menu ">
4
<li><a href="#">Arial</a>
5
</li>
6
<li><a href="#">Helvetica</a>
7
</li>
8
<li><a href="#">SegeoUI</a>
9
</li>
10
</ul>
11
</div>
12
<!-- Upside dropdown -->
13
<div class="btn-group dropdown-default dropup">
14
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
15
<ul class="dropdown-menu ">
16
<li><a href="#">Arial</a>
17
</li>
18
<li><a href="#">Helvetica</a>
19
</li>
20
<li><a href="#">SegeoUI</a>
21
</li>
22
</ul>
23
</div>
Copied!
Tag Options
Add
.btn-tag followed by .btn-tag-light or .btn-tag-dark to have tag options with color variations for buttons. Additionally, rounded tags can be achieved by adding .btn-tag-rounded
1
<!-- Tag with a light background -->
2
<button class="btn btn-tag btn-tag-light m-r-20">Link me</button>
3
<!-- Tag with a dark background -->
4
<button class="btn btn-tag btn-tag-dark">Link me</button>
5
<!-- Rounded tag with a light background -->
6
<button class="btn btn-tag btn-tag-light btn-tag-rounded m-r-20">Link me</button>
7
<!-- Rounded tag with a dark background -->
8
<button class="btn btn-tag btn-tag-dark btn-tag-rounded">Link me</button>
Copied!
Rounded buttons
Any button can be made to have rounded corners by adding
.btn-rounded
1
<!-- Large rounded button -->
2
<button class="btn btn-lg btn-rounded">Large rounded</button>
3
​
4
<!-- Regular rounded button -->
5
<button class="btn btn-rounded">Regular</button>
6
​
7
<!-- Small rounded button -->
8
<button class="btn btn-sm btn-rounded">Small</button>
Copied!
Last modified 2yr ago
Copy link