2011-04-24, 06:59 AM
This probably seems like a newbish tutorial, but I think this is a handy thing for most beginners to know.
If you want your text link to be surrounded by a box, like this:
![[Image: 24e4xhk.jpg]](https://camo.mybb.com/97a71b02bccfe1547bd9b57abb9fd583e8af75b9/687474703a2f2f6935322e74696e797069632e636f6d2f3234653478686b2e6a7067)
and to look like this when 'hovered upon':
![[Image: r8w80m.jpg]](https://camo.mybb.com/ef9f236e82a12c6dcf0bfb06c9ce1cc9609de1cc/687474703a2f2f6935312e74696e797069632e636f6d2f72387738306d2e6a7067)
then keep reading.
It's very simple (once again, I know it's pretty newbish
) and involves only some extremely short lines of CSS.
-
Below is the CSS for all link types in the panel section.
The above code generates this:
so, if that's all you want (with no hover effects) you're done! But, you need this CSS if you want hover effects:
and that generates this:
.
So, the HTML for this would just be a simple <div id="panel"><a href=""></a></div>.
So, yeah... pretty newbish, I know, but I find it handy when you're looking for a quick way to spice up links. Good for beginners Obviously this can be used for regular text as well, because it's just changing the background. I really only posted this because I used to think when I first started something like this needed jQuery or something- it doesn't
If you want your text link to be surrounded by a box, like this:
and to look like this when 'hovered upon':
then keep reading.
It's very simple (once again, I know it's pretty newbish
) and involves only some extremely short lines of CSS.-
Below is the CSS for all link types in the panel section.
#panel a {
background: #ff438a url(images/panelabg.gif) repeat-x;
color: #fff;
border: 1px solid #d95200;
padding: 4px;
}
The above code generates this:
so, if that's all you want (with no hover effects) you're done! But, you need this CSS if you want hover effects:
#panel a:hover {
background: #fff;
color: #9f013d;
border: 1px solid #d95200;
padding: 4px;
text-decoration: none;
}
and that generates this:
So, the HTML for this would just be a simple <div id="panel"><a href=""></a></div>.
So, yeah... pretty newbish, I know, but I find it handy when you're looking for a quick way to spice up links. Good for beginners
Obviously this can be used for regular text as well, because it's just changing the background. I really only posted this because I used to think when I first started something like this needed jQuery or something- it doesn't 
thanks!