Matt Doyle | Elated Communications
Web and WordPress Development
CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:
You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.
In this tutorial, we’ll take a plain old HTML table:
… and transform it into something beautiful using nothing but CSS:
Techniques we’ll cover include:
Rollovers are a nice way to add visual feedback to your website’s buttons. As a visitor moves their mouse over a rollover button, it changes to indicate that it’s clickable.
In the bad old days of HTML, the only way to create a rollover was to use JavaScript to swap the two button images. While this works, it does rely on JavaScript being enabled in the browser. It also adds a fair bit of code bloat to the page, meaning longer download times, and more coding for you.
Thankfully, these days you can create a nice rollover effect using pure CSS; no JavaScript required! Roll your mouse over this button, which is created using just HTML, CSS and a single image:
So how’s it done? Well, it all centres around the :hover pseudo-class in CSS. Using this pseudo-class, you can style a link both in its normal state and in its hover (rollover) state. By making the link a block element and giving it a background image, we can turn the link into a button. We then simply jiggle the background image around to create the rollover effect.
This Photoshop 4 tutorial (also works with later versions of Photoshop) is quite a big one. I’ll show you how to make one of those trendy menus that look like one image, but are in fact several images joined together, with each image changing as the mouse moves over them. Oh, words will never do – take a look at it in action!
These days every man and his dog is using JavaScript to create “rollover”, or “mouse-sensitive” buttons on their site. If you’re not sure what I’m talking about, move your mouse over this baby:
Get the idea?
[Read more…] about Rollover Buttons with JavaScript