Through The Lens

When you design pages that look like wizards and when the information you are gathering flows over into multiple pages you might want to give your user a feel of filling a page in which case you would want to display your NEXT buttons as text.

Actually it is very simple our task is now to style the button so that it looks like text here is how we define the style

.btn {  background-color: transparent; border: 0; padding: 0;}

now you can apply this style to the button you wish by calling the pseudo-class by name like

<input type=”button” class=”btn” />

Styling hyperlinks could be used effectively to replace the old style navigation buttons.To create this effect we style the :hover and :active pseudo-classes of the anchor tag. Am gonna define style separatley one for the :link and :visited styles and other for :hover and :active

Personally I like the hyperlinks to appear in a contrasting color to the page background by default, with a dotted underline, and on hover I would like to change the text-color so that it appears highlighted.

CSS code:

body{
background-color: #171717;
}

a:link, a:visited{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
text-decoration: none;
border-bottom: 1px dotted #eee;
background-color: transparent;
color:#fff;
}

a:hover, a:active{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
text-decoration: none;
border-bottom: 1px dotted #eee;
background-color: transparent;
color:#4eb5e1;
}

and the html looks like this

and on mouse over the links looks like this.