How to Use a CSS3 Control Button

There are a number of ways to use a micro button on your CSS3 site. For example, some people include them within an anchor (<a>) tag. Many sites use micro buttons to make it possible to perform tasks such as creating a Really Simple Syndication (RSS) feed for the site.

These buttons pop up all over the place — you see them mainly on informational sites, but they appear other places as well. A micro button is either 80 × 15 pixels or 88 × 31 pixels in size. It normally contains two pieces of text in a bicolored button; it can use several color combinations, but the text itself is a single color.

The Button Maker Online tool makes it possible to generate these micro buttons quickly and efficiently. You access Button Maker Online by clicking Button Maker on the web Tools menu of the main page. For the purposes of this example, you’ll see how to use a micro button inside a regular button.

<!DOCTYPE html>
<html>
<head>
 <title>Testing a Micro Button</title>
 <style type="text/css">
 #MicroTest
 {
  border: none;
  background-color: transparent;
 }
 </style>
</head>
<body>
 <h1>Testing a Micro Button</h1>
 <button id="MicroTest"
  onclick="alert('Clicked!')">
 <img src="MyButton.GIF">
 </button>
</body>
</html>

In this case, the .GIF file containing the button image appears as part of an <img> tag within a <button> tag. The <button> tag provides access to the onclick attribute, which is used to react to a user click with an alert() function call. You see a dialog box containing the word Clicked!

Of course, you also have a problem with the button appearing onscreen. The internal style, #MicroTest, makes the button disappear by changing its border to none and setting the background-color to transparent. As a result, all you see is the micro button.

image0.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.