Type anywhere to search
logo

buttons

Getting started

A button consists of text and/or an image that clearly communicates what action will occur when it is pressed upon.

VIA senior product manage
for UI/UX at REVOX

Button Color
Color can be a wonderful tool for making your dashboard less stressful and more calming

Color can be a wonderful tool for making your dashboard less stressful and more calming — and it can have a significant impact on your mood and well-being, We made it with you in mind


Primary Button

Normal

#6d5eac

Hover

20% white

Active

16.5% white


pages Default Multi-Purpose Theme Color. Add class by simply typing btn-primary

Complete Button

Normal

#6d5eac

Hover

20% white

Active

16.5% white


pages Default Multi-Purpose Theme Color. Add class by simply typing btn-complete

Success Button

Normal

#6d5eac

Hover

20% white

Active

16.5% white


pages Default Multi-Purpose Theme Color. Add class by simply typing btn-success

Danger Button

Normal

#6d5eac

Hover

20% white

Active

16.5% white


pages Default Multi-Purpose Theme Color. Add class by simply typing btn-danger

Warning Button

Normal

#6d5eac

Hover

20% white

Active

16.5% white


pages Default Multi-Purpose Theme Color. Add class by simply typing btn-warning

White Button

Normal

#6d5eac

Hover

20% white

Active

16.5% white


pages Default Multi-Purpose Theme Color. Add class by simply typing btn-danger

Size Options
Fancy larger or smaller buttons?
We made it all Perfect.

Size Might vary from smaller screen to a larger screen. We made few sizes that are pixel perfect and resposive


Size variation

Fancy larger or smaller buttons? Add .btn-lg .btn-sm .btn-xs for additional sizes.




Toggle Variations

Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens





Button Animations

A button can animate to show hidden content

The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
btn-animated and diirection as from-left or from-top

Button Blocks

Create block level buttons,those that span the full width of a parent by adding btn-block

Different Styles
Traditional Dropdowns

We've simplified our dropdown buttons by getting rid of the dedicated dropdown associated with them, this looks more clean and also available in all different colors






The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show

Tag Options

Create block level buttons,those that span the full width of a parent by adding .btn-block






The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show

Rounded Buttons

A button can be circular:






Circular buttons are a special type of promoted action. It Distinguish a different action or a style.

Grouped Buttons
Single Button Group

Basic example of bootstrap button groups. Wrap a series of buttons with btn in btn-group




Button toolbar

A button bar is a group of button groups, perfect for situations where you want groups of actions that are all related to a similar element or page


Size Options

Like buttons you can also use different sizes to button groups


Size Options

Go wild! mix it and make it intererting, add different groups with dropdowns


Vertical Button Group

Want it in a different perspective? its customized to work both vertical and horizontal ways


Vertical Button Group

Want it in a different perspective? its customized to work both vertical and horizontal ways


Common Icon Buttons

Basic buttons are traditional buttons with borders and background with an extra component like an icon. You can place it either on the left or the right which ever you want with different color options


Social Icon Buttons

Fancy social icons? here are some of pre-made icons and buttons done by use which can come in handy


  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
21st april 2014 2:13am

Press enter to search

suggestions :

Pages Search Results

ice cream on pages

via john smith

T
ice cream related topics

via pages

ice cream music

via pagesmix

ice cream on facebook

via facebook

Tweats on ice cream

via twitter

Circles on ice cream

via google plus