Some creative and modern button styles and effects for your inspiration.
Use any of the available button classes to quickly create a styled button.
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
.
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%.
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
.
Add the disabled
attribute to <button>
buttons.