CSS Button Creator - Imageless CSS Button Creator

Enter the css of a previously generated css button and our engine will assign all the options automatically.

.redbutton {
background: #F63D3D;
background-image: -webkit-linear-gradient(top, #F63D3D, #811616);
background-image: -moz-linear-gradient(top, #F63D3D, #811616);
background-image: -ms-linear-gradient(top, #F63D3D, #811616);
background-image: -o-linear-gradient(top, #F63D3D, #811616);
background-image: linear-gradient(to bottom, #F63D3D, #811616);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 14px;
line-height: 14px;
color: #FFFFFF;
font-family: Open Sans;
width: 185px;
font-size: 20px;
font-weight: 900;
padding: 12px;
box-shadow: 1px 1px 6px 0px #000000;
-webkit-box-shadow: 1px 1px 6px 0px #000000;
-moz-box-shadow: 1px 1px 6px 0px #000000;
text-shadow: 1px 1px 6px #000000;
border: solid #762C2C 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}

.redbutton:hover {
   border: solid #ED3333 1px;
   background: #811616;
   background-image: -webkit-linear-gradient(top, #811616, #F63D3D);
   background-image: -moz-linear-gradient(top, #811616, #F63D3D);
   background-image: -ms-linear-gradient(top, #811616, #F63D3D);
   background-image: -o-linear-gradient(top, #811616, #F63D3D);
   background-image: linear-gradient(to bottom, #811616, #F63D3D);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-decoration: none;
}

Any code you write in here will over-ride the generated code.

Button: Hover:

Small Red	Import
tron	Import
Green3D	Import
Tiny	Import

May 29, 2023

Resolved issue with import not working when rgba values were used in colors.

Dec 17, 2020

All inputs that use numbers are now set with the number type, meaning all number inputs now have up and down arrows. The changes will reflect on the related slider in realtime.

Oct 5, 2020

No more invalid characters in generated css. A lot of people were reporting their css validators throwing errors. This was due to our code injecting the wrong kind of spacing.
All zero values no longer include 'px' where applicable.
All generated CSS should now be valid on css lint validators.

Preview