CSS Button Generator

Transparent

No Gradient

STEP 1: Copy this code into your HTML page

<a href="#" class="buttonClass">Button text</a>

STEP 2: Copy this code into your CSS stylesheet


.buttonClass {
  font-size:15px;
  font-family:Arial;
  width:140px;
  height:50px;
  border-width:1px;
  color:#fff;
  border-color:#18ab29;
  font-weight:bold;
  border-top-left-radius:28px;
  border-top-right-radius:28px;
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  text-shadow: 1px 1px 0px #2f6627;
  background:#44c767;
}

.buttonClass:hover {
  background: #5cbf2a
}

Text

Font Size: 15px

Bold

Italic

Size

Vertical size: 50px

Horizontal size: 140px

Border

Border Radius:

Top Left

Top Right

Bottom Left

Bottom Right

Border Radius: 28px

Border Size: 1px

Box Shadow

Text Shadow

Vertical position: 1px

Horizontal position: 1px

Blur Radius: 0px

Want to learn CSS?