StyleWired

How to create a ‘flash mimic’ animated rollover link using just HTML and CSS

Chris — Fri, 26 Feb 2010 13:28:21 +0000

This is an extremely simple and lightweight way of created a link that animates on hover. All you have to do is create your link in the normal way using HTML. For example:

 class="animated-rollover"> href="#">Link text

Now style this code so that you have a background image for ‘p.animated-rollover a’ and a different background image for ‘p.animated-rollover a:hover’. The hover state background image is going to be an animated gif. This is how you get the animation on hover.

p.animated-rollover { width: 150px; height: 40px; background: url(images/animated_rollover_a_hover.gif); text-align: center; line-height: 40px; }
 
p.animated-rollover a { width: 150px; height: 40px; background: url(images/animated_rollover_a.gif); display: block; }
 
p.animated-rollover a:hover { background: url(images/animated_rollover_a_hover.gif); }

I’ve left out any text styling in this example. You could use ‘text-indent: -5000px; overflow: hidden’ and use the background image for the text if you like.

Social Cast sign-up call to action

Chris — Sat, 10 Jan 2009 19:01:37 +0000

From: www.socialcast.com.

Boagworld subscribe call to action

Chris — Sat, 10 Jan 2009 17:51:18 +0000

From: Boagworld.

GumTree Calls To Action

Chris — Sat, 10 Jan 2009 13:49:06 +0000

From Gumtree.com.

WordPress 2.7 Call to action

Chris — Sat, 10 Jan 2009 13:41:45 +0000

From: WordPress.org

Yahoo! Answers Email for free guide download call to action

Chris — Thu, 18 Dec 2008 15:32:15 +0000

From: Yahoo! Answers HTML email.

PSDTUTS premium membership call to action

Chris — Sun, 09 Nov 2008 23:22:05 +0000

From: PSDTUTS

Transmissions download call to action

Chris — Sun, 09 Nov 2008 23:18:08 +0000

From: Transmissions

Time Out Email Newsletter call to action

Chris — Wed, 05 Nov 2008 21:34:49 +0000

From: www.timeout.com.

Emulating HTML5 using comment tags to make your HTML easier to edit

Chris — Wed, 29 Oct 2008 13:21:28 +0000

This is something I’ve been doing in all of the pages I’ve been coding for the last year or so. I’ve noticed other designers doing similar things. This is a simple little trick that makes hand editing code a lot easier.

Associating end tags with start tags using comments

Quite simply all I do is this:

 id="footer">
 
footer content here

If I need to edit the code quickly I can easily establish the start and end of any particular element. This is similar to the HTML5 format, which is not yet being used by browsers, because HTML5 is going to be formatted something like this:

 
footer content here
 
</footer>