CSS GRADIENT BUTTON
SELECT A GRADIENT TO CREATE A BUTTON OR EDIT BUTTON DIRECTLY
Edit button
[-]
Text
Text color
Text shadow size
[+]
px
h-shadow
px
v-shadow
px
blur
px
opacity
Text shadow color
yes
no
Font Family
Arial
Arial Black
Trebuchet MS
Courier
Helvetica
Verdana
Georgia
Palatino
Impact
Comic Sans MS
Tahoma
Times New Roman
Lucida Sans
Bold text
yes
no
Font size
px
Padding
[+]
px
Top
px
Right
px
Bottom
px
Left
px
Shadow size
[+]
px
Shadow X
px
Shadow Y
px
Shadow Blur
px
Shadow Inset
yes
no
Shadow color
Hide Hover Preview
[-]
Reset
Background Start
auto
modify
Background End
auto
modify
Background Start
HOVER
auto
modify
Background End
HOVER
auto
modify
Border Radius size
[+]
px
Top Left
px
Top Right
px
Bottom Right
px
Bottom Left
px
Border
[+]
auto
modify
Top
Right
Bottom
Left
Border size
[+]
px
Top
px
Right
px
Bottom
px
Left
px
Border
HOVER
[+]
auto
modify
Top
Right
Bottom
Left
Border size
HOVER
[+]
px
Top
px
Right
px
Bottom
px
Left
px
Easier to edit : Background Example
Html & Css code for gradient button
Copy to clipboard
With a text editor copy and paste Html & Css code then save file as
example.html
, then open it with a browser to see result
It is a way to remember easily the options you changed when you created button. Save, share (copy and paste to Twitter...) with your friends...
INTEGRATION WITH SPAN TAG
You can use another
tag : span
to display button
Just add this code into the just after <body> for example
REDUCING SIZE OF ANY IMAGE
You should use universal
image compressor
to make your pics smaller.
CSS BUTTON EXAMPLES
BUTTON
PREVIEW BUTTON
SAMPLE
EXAMPLE
CSS3 TOOL
GRADIENT
ELEMENT
SLIDE
WEB SITE
STYLE
DESIGN
PAGE MENU
FUN
GENERATOR
STYLE CSS
CSS BUTTON
PAGE DESIGN
Preview
BLOG
Css3 button
DOWNLOAD CSS
EFFECT
TEXT
See more information ?
Beta Version 0.16 -
Contact & Feedback
-
Bookmark
-
Privacy