Button Builder - CSS

Button Size, Color

Horizontal Padding

Vertical Padding

Cursor

Default

Pointer

Button Color

hex

Button Text

Text Button

Font Weight

Font Size

Font Color

hex

Button Shadow

Horizontal Length

Vertical Length

Blur Radius

Spread Radius

Shadow Color

r
g
b
a

Button Border

Border Radius

Border Width

Border Color

hex

Border Style

Hover Effect

Hover Font Color

hex

Hover Button Color

hex

Hover Border Color

hex

Active/Click Effect

Active/Click Font Color

hex

Active/Click Button Color

hex

Active/Click Border Color

hex

Presets

*Click on a button to incorporate preset

Bootstrap default:

Bootstrap outline:

Background Application

button {

cursor: pointer;

padding: 12px 20px;

font-size: 15px;

color: rgba(0, 0, 0, 1);

font-weight: normal;

background-color: rgba(255, 255, 255, 1);

-webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

/* border radius */

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border: 2px outset rgba(0, 0, 0, 1);

}

/* hover effect */

button:hover {

color: rgba(255, 255, 255, 1);

background-color: rgba(9, 8, 86, 1);

border-color: rgba(0, 0, 0, 1);

}

/* active/click effect */

button:active {

color: rgba(0, 0, 0, 1);

background-color: rgba(255, 255, 255, 1);

border-color: rgba(0, 0, 0, 1);

}