Update: Opera no longer uses the -o- prefix since their switch to -webkit- in Feb 2013
CSS3 buttons can improve the look of your button with border-radius, box-shadow, text-shadow and other CSS3 effects. All it takes is a little bit of CSS knowledge and an awareness of browser prefixes. MaxButtons handles all of the CSS3 work for you, but if you’re not sure what CSS3 is, take a look below.
Wait, so what’s CSS3?
CSS3 is the extension of CSS2.1, CSS2 and CSS1. Much like HTML5 is the next step of HTML 4.01, CSS3 starts adding new ways to produce your web pages. It’s not an entirely different language, but unlike its predecessors, CSS3 is split into a few different modules.
Because CSS3 is still being ironed out, some browsers don’t support all of the features. Eventually there will be generally recognized parts of CSS3 that all browsers posses, but until then vendor prefixes must be used to satisfy all browsers.
So what do “vendor prefixes” have to do with CSS3 Buttons?
Vendor prefixes have everything to do with CSS3 buttons. As I said above, not all of CSS3 is stable across all browsers, so browsers make their own prefixes to help out. If you’ve looked at someone’s CSS and saw -ms, -moz, -webkit or -o, you’ve seen vendor prefixes.
- -webkit- : Safari, Chrome and other WebKit-based browsers
- -moz- : Firefox and other Gecko-based browsers
- -ms- : Internet Explorer
-o- : Opera
You may run into situations where the CSS3 property is covered by all browsers. To check, I generally use CanIUse.com which goes over browser support for all CSS properties as well as the HTML5 spec and how widely supported it is. Take a look at the image below at two different CSS3 properties, border-radius and transforms.
We can see that borer-radius is pretty much supported in all browsers now, so we can leave the vendor prefixes off. For CSS3 Transforms, the same is not true. For IE9 support we need a -ms- vendor prefix as well as a -webkit- vendor prefix for all other browsers except Firefox and Opera. Creating a vendor prefix stack looks a little something like this:
border-radius: 10px; /* widely supported, so no vendor prefix necessary */
-webkit-transform: rotate(7.5deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(7.5deg); /* Firefox 3.5-15 */
-ms-transform: rotate(7.5deg); /* IE 9 */
-o-transform: rotate(7.5deg); /* Opera 10.50-12.00 */
transform: rotate(7.5deg); /* Firefox 16+, IE 10+, Opera 12.50+ */If you’re not sure how to create a stack like that, you can always go to CSS3Please.com and have the CSS generated for you.
The main purpose of a vendor prefix stack is to allow cross-browser implementation while also allowing for graceful degradation. There was a long back and forth between the Mozilla Development Network and a Firefox user who had only been using the -moz- vendor prefix, never adding a fallback, and Firefox eventually took out the -moz- vendor prefix completely on some properties since it now had native support. Since the -moz- prefix was used and never just a straight property, the CSS3 for that particular property stopped functioning. Be smart and check support of the CSS3 property you’d like to use.
Along with using CSS3 Please, you can also use CSS pre-processors like Sass and LESS to create mixins that will generate the prefixed code for you.
MaxButtons and CSS3
It’s never too soon to start playing with CSS3, so either start writing some yourself or check out MaxButtons to see how CSS3 can help extend your web creativity. Although the free version of our plugin helps get your great buttons into your WordPress page, MaxButtons Pro takes it a step further. Let’s take a look at the button below.
I created that button with MaxButtons Pro. One of the really cool things about MaxButtons Pro is that along with visually creating your button, we also allow you to view the CSS from the button page. Below is the CSS output when the button is loaded on your page.
div.maxbutton-23-container {
width: 230px;
margin-top: 5px;
margin-bottom: 25px;
}
a.maxbutton-23 {
text-decoration: none;
color: #ffffff;
}
a.maxbutton-23 .maxbutton {
width: 200px;
height: 90px;
background-color: #8ab6e6;
background: linear-gradient(#8ab6e6 45%, #6f95bd);
background: -moz-linear-gradient(#8ab6e6 45%, #6f95bd);
background: -o-linear-gradient(#8ab6e6 45%, #6f95bd);
background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, #8ab6e6), color-stop(1, #6f95bd));
border-style: solid;
border-width: 1px;
border-color: #a8cbf0;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 0px -1px 1px #748da6;
box-shadow: 0px 2px 4px #858585;
-pie-background: linear-gradient(#8ab6e6 45%, #6f95bd);
position: relative;
behavior: url("https://www.maxbuttons.com/wp-content/plugins/maxbuttons-pro/pie/PIE.htc");
}
a.maxbutton-23 .maxbutton .mb-text {
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 1.0em;
width: 100%;
}
a.maxbutton-23 .maxbutton .mb-text2 {
color: #ffffff;
font-family: Arial;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-align: center;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 1.0em;
width: 100%;
}
a.maxbutton-23 .maxbutton .mb-icon {
padding-top: 10px;
padding-right: 6px;
padding-bottom: 0px;
padding-left: 8px;
width: 32px;
}
a.maxbutton-23 .maxbutton .mb-icon img {
background: none;
padding: 0px;
margin: 0px;
border: none;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
box-shadow: none;
}
a.maxbutton-23 .maxbutton .mb-icon.mb-top {
text-align: center;
}
a.maxbutton-23:visited {
text-decoration: none;
color: #ffffff;
}
a.maxbutton-23:hover {
text-decoration: none;
color: #ffffff;
}
a.maxbutton-23:hover .maxbutton {
background-color: #6f95bd;
background: linear-gradient(#6f95bd 45%, #6f95bd);
background: -moz-linear-gradient(#6f95bd 45%, #6f95bd);
background: -o-linear-gradient(#6f95bd 45%, #6f95bd);
background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, #6f95bd), color-stop(1, #6f95bd));
border-color: #a8cbf0;
text-shadow: 0px -1px 1px #58718a;
box-shadow: 0px 2px 4px #858585;
-pie-background: linear-gradient(#6f95bd 45%, #6f95bd);
position: relative;
behavior: url("https://www.maxbuttons.com/wp-content/plugins/maxbuttons-pro/pie/PIE.htc");
}
a.maxbutton-23:hover .maxbutton .mb-text {
color: #ffffff;
}
a.maxbutton-23:hover .maxbutton .mb-text2 {
color: #ffffff;
}If you’re not well-versed in CSS, that may look pretty intimidating, but you can start to see where vendor prefixes come in. MaxButtons Pro uses them with gradient backgrounds and border-radius. You’ll also see -pie- in there for background gradients. CSS3PIE allows some CSS3 to be used in legacy versions of Internet Explorer.
So that’s a quick look at CSS3 and how easy MaxButtons Pro makes creating beautiful buttons for use in your WordPress sites.
Look for more in-depth conversation on how to use CSS3 properties in the coming weeks.