Revision: 34074
Updated Code
at October 16, 2010 15:38 by bullzito
Updated Code
/* CSS3 BUTTON
----------------------------------------------------- */
.button {
border:1px solid #1D4253;
color:#FFFFFF;
text-shadow:0 -1px 0 #004e68;
font-size:12px;
display:inline-block;
margin:8px 0;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#007197;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,93,124)),
color-stop(1, rgb(0,136,181))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,93,124) 0%,
rgb(0,136,181) 100%
);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
}
.button:hover {
background-color:#0081ab;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,116,154)),
color-stop(1, rgb(0,165,198))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,116,154) 0%,
rgb(0,165,198) 100%
);
text-decoration:none;
}
.button:active {
background-color:#006486;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,133,166)),
color-stop(1, rgb(0,83,122))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,133,166) 0%,
rgb(0,83,122) 100%
);
-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
}
.button span {
padding:8px 20px;
border-top:1px solid #00B8D3;
display:block;
font-weight:bold;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.button span:active { border-top-color:transparent; }
/* HTML MARK-UP
----------------------------------------------------- */
<a href="#" class="button"><span>CSS3 Button - No Images</span></a>
Revision: 34073
Updated Code
at October 16, 2010 15:35 by bullzito
Updated Code
/* CSS3 BUTTON
----------------------------------------------------- */
.button {
border:1px solid #1D4253;
color:#FFFFFF;
text-shadow:0 -1px 0 #004e68;
font-size:12px;
display:inline-block;
margin:8px 0;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#007197;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,93,124)),
color-stop(1, rgb(0,136,181))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,93,124) 0%,
rgb(0,136,181) 100%
);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
}
.button:hover {
background-color:#0081ab;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,116,154)),
color-stop(1, rgb(0,165,198))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,116,154) 0%,
rgb(0,165,198) 100%
);
text-decoration:none;
}
.button:active {
background-color:#006486;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,133,166)),
color-stop(1, rgb(0,83,122))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,133,166) 0%,
rgb(0,83,122) 100%
);
-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
}
.button span {
padding:8px 20px;
border-top:1px solid #00B8D3;
display:block;
font-weight:bold;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
/* HTML MARK-UP
----------------------------------------------------- */
<a href="#" class="button"><span>CSS3 Button - No Images</span></a>
Revision: 34072
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at October 16, 2010 15:33 by bullzito
Initial Code
/* BASIC PAGE STYLING
----------------------------------------------------- */
* { margin:0; padding:0; border:0; }
body { background:#ddd; font:normal 100%/normal Arial, Verdana, Geneva, sans-serif; }
a { text-decoration:none; }
div { margin:100px auto; width:500px; background:#FFF; padding:50px 20px; border:1px solid #ccc; }
/* CSS3 BUTTON
----------------------------------------------------- */
.button {
border:1px solid #1D4253;
color:#FFFFFF;
text-shadow:0 -1px 0 #004e68;
font-size:12px;
display:inline-block;
margin:8px 0;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#007197;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,93,124)),
color-stop(1, rgb(0,136,181))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,93,124) 0%,
rgb(0,136,181) 100%
);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
}
.button:hover {
background-color:#0081ab;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,116,154)),
color-stop(1, rgb(0,165,198))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,116,154) 0%,
rgb(0,165,198) 100%
);
text-decoration:none;
}
.button:active {
background-color:#006486;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,133,166)),
color-stop(1, rgb(0,83,122))
);
background-image:
-moz-linear-gradient(
center bottom,
rgb(0,133,166) 0%,
rgb(0,83,122) 100%
);
-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
}
.button span {
padding:8px 20px;
border-top:1px solid #00B8D3;
display:block;
font-weight:bold;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
Initial URL
http://marioluevanos.com/playground/CSS3%20Button/
Initial Description
<h1>CSS3 Button</h1>\\r\\n<p>This uses no images and has fall-back colors for IE browsers.</p>
Initial Title
CSS3 Buttons (Call to Action)
Initial Tags
Initial Language
CSS