Hello Folks!
As you all know CSS3 is is just getting from better to better and my sense tells me that Microsoft might surprise us with a full support.
Skipping Valentine and going for some real Skills.
Preview
CSS3 Web 2.0 buttons Preview
How to create a web2.0 button style using only CSS3
and actually they look cool!
/* Page Style */
h1, h2, h3{font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size:22px;color:black;}
/* Common Style for all buttons in the page */
input{color:white;font-family: Arial, sans-serif;font-size:14px;padding:10px 30px;border:0px black none;cursor:pointer;font-weight:bold;-moz-border-radius: 5px; -webkit-border-radius: 5px;}
.blue_btn {
background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(26, 97, 219)), color-stop(0.51, rgb(54, 144, 240)), color-stop(0.54, rgb(84, 164, 238)), to(rgb(112, 181, 242)));
background-image:-moz-linear-gradient( center bottom, rgb(26,97,219) 0%, rgb(54,144,240) 51%, rgb(84,164,238) 54%, rgb(112,181,242) 100%);
background-color:#1c65dc;
}
.black_btn{
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(0,0,0)),color-stop(1, rgb(125,126,125)));
background-image:-moz-linear-gradient(center bottom,rgb(0,0,0) 0%,rgb(125,126,125) 100%);
background-color:#000;
}
.glassy_btn{
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(2,168,228)),color-stop(0.06, rgb(0,172,229)),color-stop(0.07, rgb(71,189,240)), color-stop(0.3, rgb(20,123,182)),color-stop(0.53, rgb(0,80,129)),color-stop(0.96, rgb(114,149,181)),color-stop(0.97, rgb(2,54,97)));
background-image:-moz-linear-gradient(center bottom,rgb(2,168,228) 0%,rgb(0,172,229) 6%,rgb(71,189,240) 7%,rgb(20,123,182) 30%,rgb(0,80,129) 53%,rgb(114,149,181) 96%,rgb(2,54,97) 97%);
background-color:#1c608c;
}
input:hover{color:#0c2e4e;}
h1, h2, h3{font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size:22px;color:black;}
/* Common Style for all buttons in the page */
input{color:white;font-family: Arial, sans-serif;font-size:14px;padding:10px 30px;border:0px black none;cursor:pointer;font-weight:bold;-moz-border-radius: 5px; -webkit-border-radius: 5px;}
.blue_btn {
background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(26, 97, 219)), color-stop(0.51, rgb(54, 144, 240)), color-stop(0.54, rgb(84, 164, 238)), to(rgb(112, 181, 242)));
background-image:-moz-linear-gradient( center bottom, rgb(26,97,219) 0%, rgb(54,144,240) 51%, rgb(84,164,238) 54%, rgb(112,181,242) 100%);
background-color:#1c65dc;
}
.black_btn{
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(0,0,0)),color-stop(1, rgb(125,126,125)));
background-image:-moz-linear-gradient(center bottom,rgb(0,0,0) 0%,rgb(125,126,125) 100%);
background-color:#000;
}
.glassy_btn{
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(2,168,228)),color-stop(0.06, rgb(0,172,229)),color-stop(0.07, rgb(71,189,240)), color-stop(0.3, rgb(20,123,182)),color-stop(0.53, rgb(0,80,129)),color-stop(0.96, rgb(114,149,181)),color-stop(0.97, rgb(2,54,97)));
background-image:-moz-linear-gradient(center bottom,rgb(2,168,228) 0%,rgb(0,172,229) 6%,rgb(71,189,240) 7%,rgb(20,123,182) 30%,rgb(0,80,129) 53%,rgb(114,149,181) 96%,rgb(2,54,97) 97%);
background-color:#1c608c;
}
input:hover{color:#0c2e4e;}
And here is the HTML used
<h1>CSS3 Blue Button Style</h1>
<input class="blue_btn" name="BlueButton" type="submit" value="I'm Cool!" />
<h2>CSS3 Black Button Style</h2>
<input class="black_btn" name="BlackButton" type="submit" value="I'm Cool!" />
<h3>CSS3 Glassy Button Style</h3>
<input class="glassy_btn" name="BlackButton" type="submit" value="I'm Cool!" />
<input class="blue_btn" name="BlueButton" type="submit" value="I'm Cool!" />
<h2>CSS3 Black Button Style</h2>
<input class="black_btn" name="BlackButton" type="submit" value="I'm Cool!" />
<h3>CSS3 Glassy Button Style</h3>
<input class="glassy_btn" name="BlackButton" type="submit" value="I'm Cool!" />
Inspired From:
Just to confirm: CSS3 is not yet implemented in IE8 which means you have to give either alternative image or background color to the input.
Don’t forget to follow me on Twitter: @MohammedAlaa
Cheers…
Discussion
No comments for “CSS3 Web 2.0 buttons style without images”