MightyMeta

vignette-b

Fading Background Buttons 3

| 3 Comments

Here I have another go at tinkering around with background images that fade on hover. This time I’ve used a patterned background and placed vignette-style .pngs over the top which are animated using transition.

CSS3 Animated Vignette Buttons

Demo (Works Best in Firefox 4, Chrome or Safari)

Download Source

background image derived from one of BittBox’s Retro Wallpapers

Tutorial

The Set Up

Each example in the demo is a single <a> element, so the HTML is about as basic as it gets:

<a class="button" href="#">A Button!</a>

Next up, we add in some standard styling that will work in all browsers.

.button {
display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
background: url(images/background.png) no-repeat center -100px;
}

.button:hover {
background: url(images/background.png) no-repeat center 0px;
}

You’ll notice that I’m using a sprite, it looks like this:

Vignette Button Background Sprite

The declaration positions the darker image in place first, then moves the brighter version into view on hover.

To finish the set up, we sprinkle on a bit of CSS3 goodness for those browsers that have joined the party.

.button {
display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;       
border-radius: 25px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
background: url(images/background.png) no-repeat center -100px;
}

Result, one baroque looking but unremarkable button, with a basic hover effect:

A Button!

Example One — A Simple Fade

The first example uses a technique similar to that used by Jonathan Snook, the difference being that we are using CSS3 instead of JQuery and layered, semi-transparent backgrounds instead of just one.

The additional image used is this:

Linear Gradient

This is placed over the background using the CSS3 multiple background syntax. By moving the original background declaration to the top (rather than replacing it) means that browsers that don’t support multiple backgrounds will parse the first and simply ignore the second. For those that do, the second declaration overrides the first.

.button {

/* Fallback for browsers that don't support multiple bgs*/

background: url(images/background.png) no-repeat center -100px;

/* Style for the rest */        

display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;       
border-radius: 25px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
background: url(images/linear-gradient.png) no-repeat 0px -400px, url(images/background.png) no-repeat center 0px;
}

.button:hover {

/* Fallback for browsers that don't support multiple bgs*/

background: url(images/background.png) no-repeat center 0px;

/* Hover style for the rest */        

background: url(images/linear-gradient.png) no-repeat 0px 0px, url(images/background.png) no-repeat center 0px;

}

So, what’s happening here is that the dark part of the gradient is placed over background pattern, then the gradient is moved on hover to a more tranparent position, revealing more of the pattern underneath.

Now we have this set up, we can animate the change of gradient position using CSS3 transitions by adding this code on to the end of each rule:

-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

Transitions are only supported by Webkit browsers and the upcoming Firefox 4, but those that don’t will still show the hover effect, it just won’t fade in. You could always supply a JQuery fallback of course.

Example Two — Peek-A-Boo!

This is a simple variation of the first example, the difference being that the gradient is reflected, giving the impression that you are peeking through some sort of spy-hole when it moves into place. ease-out is used on the transition to give it extra ‘springyness’.

Image used:

Reflected Gradient

CSS:

.button {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -105px;

 /* Style for the rest */        

 display: block;
 width: 5em;
 margin: 0px 20px;
 padding: 30px 40px;
 text-align: center;
 font-family: Arial, sans-serif;
 font-size: 18px;
 color: #fff;
 text-decoration: none;
 text-shadow: 1px 1px 0px #000;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -o-border-radius: 25px;       
 border-radius: 25px;
 background: url(images/stripes.png) no-repeat 0px 0px, url(images/background.png) no-repeat center -8px;
 -moz-box-shadow: 2px 2px 10px #000;
 -webkit-box-shadow: 2px 2px 10px #000;
 -o-box-shadow: 2px 2px 10px #000;
 box-shadow: 2px 2px 10px #000;       
 -moz-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 transition: all 1s ease-out;

 }

 .button:hover {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -5px;

 /* Hover style for the rest */        

 background: url(images/stripes.png) no-repeat 0px -200px, url(images/background.png) no-repeat center -8px;
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;        

 }

Example Three — Iris

This uses a different approach during the transition, animating background-size, rather than background-position. If we create a radial gradient with a transparent hole in the middle, this can be stretched to become larger, revealing more of the patterned background underneath on :hover.

Image used:

Radial Gradient

CSS

.button {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -105px;

 /* Style for the rest */

 display: block;
 width: 5em;
 padding: 30px 40px;
 text-align: center;
 font-family: Arial, sans-serif;
 font-size: 18px;
 color: #fff;
 text-decoration: none;
 text-shadow: 1px 1px 0px #000;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -o-border-radius: 25px;       
 border-radius: 25px;
 background: url(images/radial-gradient.png) no-repeat center center, url(images/background.png) no-repeat center -8px;
 -moz-box-shadow: 2px 2px 10px #000;
 -webkit-box-shadow: 2px 2px 10px #000;
 -o-box-shadow: 2px 2px 10px #000;
 box-shadow: 2px 2px 10px #000;       
 -moz-background-size: 200px 200px, 180px 200px;
 -webkit-background-size: 200px 200px, 180px 200px;
 -o-background-size: 200px 200px, 180px 200px;
 background-size: 200px 200px, 180px 200px;       
 -moz-transition: all 0.75s ease;
 -webkit-transition: all 0.75s ease;
 -o-transition: all 0.75s ease;
 transition: all 0.75s ease;

 }

 .button:hover {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -5px;

 /* Hover style for the rest */

 background: url(images/radial-gradient.png) no-repeat center center, url(images/background.png) no repeat center -8px;
 -moz-background-size: 1000px 1000px, 180px 200px;
 -webkit-background-size: 1000px 1000px, 180px 200px;
 -o-background-size: 1000px 1000px, 180px 200px;
 background-size: 1000px 1000px, 180px 200px;       
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;

 }

Conclusion

I can see there being a lot more possibilities with this technique, using different background images, gradient shapes and position/size animations. If you come up with some, feel free to drop a link in to the comments.

And Finally…

This post is part of a personal challenge to try and create buttons that fade between two background images, without requiring lots of unsemantic absolutely positioned elements.

I’ve found a way to do it using CSS generated content, after reading this post by Nicolas Gallagher, but currently only Firefox 4+ will animate generated stuff using transition. Yes, and before you ask, JavaScript won’t do it either.

Anyway, here is a link to what I have come up with so far (remember, FF4+ only). It’s one step closer, and if the WebKit team get on board with animating generated content, then we’re almost there.

If you enjoyed this post, please consider sharing it using the above buttons, leaving a comment or subscribing to the RSS feed.

3 Comments

  1. Nice post! Thank you for the tips :)

  2. Thanks , nice idea! i ll try to implement a similar effect on my menu

  3. Very nice example. thanks for tutorial.

Leave a Reply

Required fields are marked *.


MightyMeta, 8 St Lawrence Lane, Ashburton, Devon, UK, TQ13 7DD

Powered by WordPress | Theme Derived From "Yoko" by by Elmastudio

Scroll To Top