buttonStyler

"Make it simple, but significant"

Dan Draper Mad Men

Font

28

Shadow

2
0
5

Box

2
0
5

Padding

2
0
5

Border

2
0

Background

Hover Font

Hover Background

Hover Border

2

1. Create your button

As simple as adding the styling attributes that you want.

Tip: The color picker under the button display is to change the background color to match the background color where you want to use the button.

2. Copy the CSS

Click the copy icon in the top left of the CSS markup display block.

Its as easy as that. "Bazinga, it's copied"!

You can paste your button CSS into this codepen to see how it works.

3. Add your button

a) Paste the button CSS into your stylesheet.

b) Substitute #demo-button for the id or class name of your own button.

c) Search for your chosen font at Google Fonts.

d) Copy and paste <link> into the head of your HTML. Or Copy the @import and paste it into the top of your CSS stylesheet.