Notice that we’ll keep the original solid background color prior to the gradient rules browsers that don’t yet support CSS gradients will degrade to this solid color. (I recommend this handy tool to construct your gradient rules.) This will make the surface of the button appear slightly concave.īackground: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6)) background: -moz-linear-gradient(#3194c6, #5bacd6)
This button is starting to become far more interesting.įor browsers that currently support it (WebKit and Mozilla), I’m going to override the background color with a CSS gradient that runs from the original blue to a slightly lighter blue. With the classic Cooper Black font chosen, and the simple Typekit scripts in place, I’ll now apply that font to the button style.įont-family: "cooper-black-std-1", "cooper-black-std-2" As I mentioned earlier, buttons are a great place to reintroduce brand type, and with Typekit we can quickly and easily add a custom font here without using an image. Next, let’s hop on over to Typekit and choose a typeface for the button. I’m also setting display: inline-block on the link so that we can animate the clicking of the button later on. I’m adding the vendor-prefixed border-radius properties for WebKit and Mozilla browsers, followed by the real, non-prefixed version for future-proofing. Our first step is to add basic styles for background, color, and rounded corners to make this simple little link look more like a button. Trust me, this harmless extra element is worth it.
Don’t panic we’ll use that to create an animated effect when pressing the button (more on that later). I’m going to use a hyperlink in this example, but the styles we’re going to add could just as easily be applied to a or element as well. Check out the demos from Rogie King and Mark Otto to get a sense of how CSS3 can be used to add dimension to otherwise flat objects. Through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create highly polished interface components that don’t require images. The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason I’m particularly taken with buttons at the moment. Add on top of that the advances made in and you have yourself a powerful combination for creating a wide variety of interface elements that are reusable and will degrade well in older browsers.
Now, in certain situations, CSS can replace the inflexible image buttons we used in the past. This was probably four years ago, and we’ve come a long way since. My point was that if the type in your logo was an image, and stylish buttons were also often images, then why not align the fonts in both to bring some cohesiveness to the typography. Today’s post was written by Dan Cederholm of SimpleBits.Ī few years ago I gave a talk about why a button made a great place to bring in type from a branding element (such as a logo).
CSS3 MENU BUTTON SERIES
This is part of a series of guest posts covering tips and tricks for working with fonts on the web.