CSS / XHTML TEXT BUTTONS

27. October 2004, 20:12 | by WD Milner | Full Article |

As an experiment in reducing load times, and playing with CSS, I created text versions of the W3C validation buttons. While variations of this can be found on a number of websites, for one reason or another they didn't quite suit my needs so I created my own. I also tried making a text version of the ICRA rating button, and the link graphic for a web counter from Digits.com that I experiment with.

I made RSS/XML buttons while I was at it even though the site wasn't available in that format. For those interested, the CSS and HTMLcode for these, and a few other buttons that could be used as templates, can be found below.

The size is easily adjusted by changing the font-size in the generic textbutton class. I recommend sizes between .75 and 1em depending on the page design. Text content may be changed to reflect the proper specification (eg. CSS 1.0, CSS 2.0, HTML 4.01, XHTML 1.0, etc.).

Note that in the examples below, some CSS classes are reused for portions of other buttons.

 

Generic CSS textbutton class

.textbutton
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: arial, verdana, helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #CCCCCC;
	text-align: left;
	text-decoration: none;
}

 

W3C Buttons

CSS
.w3c
{
	background-color: #FFFFFF;
	color: #335599;
	padding: 0px 3px 0px 5px;
}
.spec
{
	background-color: #F0C060;
	color: #000000;
	padding: 0px 5px 0px 5px;
}
HTML

W3CCSS 2.0

<span class="textbutton"><span class="w3c">W3C</span><span class="spec">CSS 2.0</span></span>

W3CXHTML 1.0

<span class=>"textbutton"><span class="w3c">W3C</span><span class="spec">XHTML 1.0</span></span>

 

ICRA Button

CSS
.icra1
{
	background-color: #FFFFFF;
	color: #000000;
	padding: 0px 3px 0px 5px;
}
.icra2
{
	background-color:  #335599;
	color:#FFFFFF;
	padding: 0px 5px 0px 5px;
}
HTML

ICRARated

<span class="textbutton"><span class="icra1">ICRA</span><span class="icra2">Rated</span></span>

 

SafeSurf Button

CSS
.ssurf
{
	background-color: #000066;
	color: #FFFFFF;
	padding: 0px 5px 0px 5px;

}
.icra1
{
	background-color:  #335599;
	color:#FFFFFF;
	padding: 0px 5px 0px 5px;
}
HTML

SafeSurfRated

<span class="textbutton"><span class="ssurf">SafeSurf</span><span class="icra1">Rated</span></span>

 

DIGITS Button

CSS
.dwc1
{
	background-color: #000000;
	color:#FFFFFF;
	padding: 0px 3px 0px 5px;
}
.dwc2
{
	background-color: #FFFFFF;
	color: #000000;
	padding: 0px 5px 0px 5px;
}
HTML

WEBCounter

<span class="textbutton"><span class="pics">WEBS</span><span class="dwc2">Counter</span></span>

 

PICS Rated Button

CSS
.pics
{
	background-color: #FF0000;
	color:#FFFFFF;
	padding: 0px 3px 0px 5px;
}
.dwc2
{
	background-color: #FFFFFF;
	color: #000000;
	padding: 0px 5px 0px 5px;
}
HTML

PICSRated

<span class="textbutton"><span class="pics">PICS</span><span class="dwc2">Rated</span></span>

 

RSS/XML Buttons

CSS
.rss
{
	background-color: #0000CC;
	color: #FFFFFF;
	padding: 0px 5px 0px 5px;
}
.atom
{
	background-color: #BB00BB;
	color: #FFFFFF;
	padding: 0px 5px 0px 5px;
}
.xmlstream
{
	background-color: #FF9900;
	color: #FFFFFF;
	padding: 0px 5px 0px 5px;
}
.versn
{
	background-color: #777777;
	color: #FFFFFF;
	padding: 0px 5px 0px 5px;
}
HTML

RSS   XML   ATOM

<span class="textbutton"><span class="rss">RSS</span></span>

<span class="textbutton"><span class="xmlstream">XML</span></span>

<span class="textbutton"><span class="atom">ATOM</span></span>

RSS2.0   XML1.0   ATOM1.0

<span class="textbutton"><span class="rss">RSS</span><span class="versn">2.0</span></span>

<span class="textbutton"><span class="xmlstream">XML</span><span class="versn">1.0</span></span>

<span class="textbutton"><span class="atom">ATOM</span><span class="versn">1.0</span></span>

 

ODP Button

CSS
.odp
{
	background-color: #007700;
	color:#FFFFFF;
	padding: 0px 3px 0px 5px;
}
.dmoz
{
	background-color: #CCFFCC;
	color: #000000;
	padding: 0px 5px 0px 5px;
}
HTML

ODPListed

<span class="textbutton"><span class="odp">ODP</span><span class="dmoz">Listed</span></span>

 

The above can be adapted to a wide variety of sizes and colours to create whatever sorts of buttons you might need. Enjoy!

- 30 -

Categories: ,
Keywords: css,html,xhtml,textbuttons,buttons

Comments


 



Textile help
 
* Indicates a required field.

As a SPAM prevention measure, comments are moderated and will be posted once vetted.

 

Article & Comments


Comments are not enabled for all articles or documents.

Article Navigation
|

Categories

Business
Communications
Electronics
Entertainment
Environment
Government
Internet and WWW
Miscellany
Music and Audio
News
Photography
Privacy
Psychology
Security
Society and Culture
Stage and Screen
Technology
Theology
Tips and Tricks
Web Design
Web Site


The Birches - Milner.ca Support Child Safety Online

 

 
 
 Help to FIGHT spam!
 • 
  •
•••