Buttons

  1. Home
  2. Basic UI
  3. Buttons

General Buttons Heading

Button With Size

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

Rounded Button / Square Button

Round button and the square button can be used add .btn-lg or .btn-sm for additional sizes.

Buttons With Animated Icon

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

Default Button

Using color to add meaning to a button only provides a visual indication. We provide a variety of colors for you to express different emotions.

Buttons With Effects

Sign Up
Login
More
More
Sign Up
Sign Up
Sign Up
Sign Up
Sign Up
Sign Up
Sign Up
Sign Up

Block Button

A block level button spans the entire width of the parent element, with by adding add .btn-block.

Previous or Next Buttons

Create a button like previous and next by .btn-previous or .btn-next with .btn-round.

Flat And Raised Button

Raised buttons are used to showcase something unique and eye-catching. While the Flat buttons are printed on the material with different type of possible colors.

Floating Button

You can use Floating buttons to promote special contents. Use the class .btn with an additional class .btn-floating to use Floating button.

Button With Icon

Flexibility to align the icons before or after the text inside a button. Button with left aligned icon.

Icon Button

Button with icon only.

Icon Dropdown

Icon used in the dropdown.

Social Button Sizes

Different Sizes for you to use with icon button or icon only button with sizes.

Social In Labels

It is often used at the top of a page or section with variation.

Social Icon Button

Icon is social icon with button.

Button Group

Basic Button Group

Wrap a series of buttons with .btn in .btn-group.

Vertical Button Group

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Button Group Sizes

Button group sizes can help you to group buttons in different sizes, to use this feature just add .btn-group-* class to the .btn-group class.

Button Toolbar

Combine sets of .btn-group into a .btn-toolbar for more complex components.

Nesting Button Group

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Justified Button Group

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.