Buttons

Buttons

The <button> tag defines a clickable button.

Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.

Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.

From W3Schools.com

Default

Bootstrap default buttons, with template's styling.

Button Tags

Bootstrap default buttons, with template's styling.

Link

Different States

Buttons in different states.

Rounded

Buttons with rounded edges.

Squared

Buttons with squared edges.

Light

Buttons with light backgrounds.

Gradients

Buttons with gradient backgrounds.

3D

Buttons with gradient backgrounds and shadows.

Outline

Outline buttons.

Small

Small buttons.

Large

Large buttons.

Wide

Wide buttons.

Block Level

Block Level buttons.

With Icons - FontAwesome

Buttons with icons, from FontAwesome icon library.

With Icons - SVG

Buttons with SVG icons.

With Icons - Split

Buttons with icons split from the label.

With Icons - Split - Color Difference

Buttons with icons split from the label.


With Hidden Icons

Buttons with hidden icons, appearing on hover.

Vertical Buttons

Buttons with icons on top of the label.

Only Icons

Buttons with only icons.

Only Icons - Square

Buttons with equal height and width.

Only Icons - Circled

Circled buttons each contaning only an icon.

Sharp Corners

Circled buttons with one sharp corner.

Sharp Corners Animated

Animated circled buttons with one sharp corner.

Animated Slider Button

Static Slider Button

Static circled buttons with one sharp corner.

App Store Buttons