Buttons general ui components

Creative Button Styles

Some creative and modern button styles and effects for your inspiration.

Brand Button

Options

Use any of the available button classes to quickly create a styled button.

Regular buttons

Button group + Dropdowns

Stroke buttons

Variant Stroke buttons

Circle buttons

Circle stroke buttons

Custom buttons

Custom stroke buttons

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Button state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state progammatically. If button disabled state, buttons look unclickable by fading them back 50%.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

Anchor element

Add the .active class to <a> buttons.

Primary link Link

Button element

Add the disabled attribute to <button> buttons.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link
2014 - 2015 © Blankon Admin. Created by Djava UI, Yogyakarta ID 0.01 GB(0%) of 15 GB used