• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: hover

hover

Styling Links with CSS

18 August 2008 / Leave a Comment

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

  • normal links
  • links that have already been visited
  • links that are being clicked on, and
  • links that are hovered over with the mouse.

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.

[Read more…] about Styling Links with CSS

Styling Tables with CSS

19 February 2008 / 8 Comments

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:

  • Adjusting the spacing, padding and margin of table cells
  • Styling the borders of the table and the cells within the table
  • Changing text and background colours, and using background images
  • Creating alternately-coloured table rows to aid legibility
  • Adding a mouse hover effect to table rows
  • Styling the table caption

[Read more…] about Styling Tables with CSS

Making CSS Rollover Buttons

16 April 2007 / 191 Comments

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.

[Read more…] about Making CSS Rollover Buttons

Making a Rollover Menu Bar

12 December 1998 / 2 Comments

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!

[Read more…] about Making a Rollover Menu Bar

Rollover Buttons with JavaScript

7 September 1998 / Leave a Comment

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:

Button

Get the idea?
[Read more…] about Rollover Buttons with JavaScript

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits