{
  "$type": "site.standard.document",
  "canonicalUrl": "https://www.simoncox.com/short-articles/2002-05-11-css-rollovers-no-javascript/",
  "description": "I wanted stylish CSS rollover buttons—not just color blocks—so I explored techniques beyond basic JavaScript effects.",
  "path": "/short-articles/2002-05-11-css-rollovers-no-javascript/",
  "publishedAt": "2002-05-11T00:00:00.000Z",
  "site": "at://did:plc:tki7vwlanxbwrz2er67eaeqa/site.standard.publication/3mp4h4md7zv2y",
  "tags": "Web",
  "textContent": "I have seen a couple of examples of css roll over buttons on the web but they changed a simple square block of colour and I wanted something more stylish - more like what you do with graphical javascript rollovers.\nI decide the way to do it was to use an image as the background and change it in the style for a:hover and a:visited.\n\nFirst of all I made 4 graphics. The first was a 15px square transparent gif and the other three were coloured buttons also 15px square.\n{eleventy:ignore}\n{eleventy:ignore}\n{eleventy:ignore}\n{eleventy:ignore}\n\nI then coded a link and included the transparent_15.gif before the links text:\nThis is a link to another page.\n\nThis is the link to the demo page\n\nNotice I have added both a title tag for the link and an alt tag for the image to help with Accessibility.\n\nThen I added the css:\n\n~\na { background-image: url(orangeround_15.gif); background-repeat: no-repeat; background-position: 0px 3px; color: #000000; text-decoration: underline}  \n\na:hover { background-image: url(greenround_15.gif); background-repeat: \n\nno-repeat; background-position: 0px 3px; color: #000000} body { font-family: Arial, Helvetica, sans-serif; font-size: 12px}  \n\np { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px} a:visited { background-image: url(greenroundtick_15.gif);   \n\nbackground-repeat: no-repeat; background-position: 0px 3px; color: #000000 }\n~\n\nThe orange button appears as the link style background and the transparent gif ensures the text is moved to the right the correct amount. When you mouse over the link the a:hover style comes into play which changes the background to the green button. When you have visited the link and come back the a:visited style shows the green button with tick as a background. You could also add images for a:active if you wished. You could do this without the transparent gif by adding 15px left padding but we can use this technique for links in the middle of a paragraph of text.",
  "title": "CSS rollovers - no javascript!"
}