CSS Buttons
This CSS snippets are based on an idea of Meyer. I found it somewhere on his website, but when it came to actually implement it I did not found it anywhere. Thus my implementation could be different from his (but could also be the same).
I needed to put some button in the footer area of the webpages. Standard stuff to say that it's standard XHTML, standard CSS, that I am a proud Mac user and that this site has been made with BBEdit (uff... if only I were paid to adverize BBEdit...). I wanted to try this solution. In fact it worked and at some state of developement my site used them.
Right now I'm using standard buttom made with Pixel Button, I think it looks nicer. Anyway the CSS version was technologically more interesting, and so I decided to make this webpage.
This is the HTML code:
<span class="backrag"> Made with</span><span class="frag">a Mac </span> <span class="backrag"> Made with</span><span class="frag">BBEdit</span> <br /> <span class="backrag"> <a href="http://jigsaw.w3.org/css-validator/check/referer"> CSS </a> </span> <span class="frag"> 2.1 </span> <span class="backrag"> <a href="http://validator.w3.org/check?uri=referer"> XHTML </a> </span> <span class="frag"> 1.1</span> <br />
This is the CSS code
#showcode
{
background: transparent;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #8B92C0;
background: #242631;
background-image: url(../../images/back_base.jpg);
background-repeat: repeat-y;
background-position: 0 0;
background-attachment: fixed;
}
.backrag
{
background: #8B92C0;
color: #242631;
font-size: x-small;
width: 30px;
padding: 1px;
border: solid 1px #8B92C0;
padding-left: 3px;
padding-right: 3px;
margin-left: 2px;
min-width: 30px;
line-height: 20px;
}
.frag
{
background: #242631;
color: #8B92C0;
font-size: x-small;
width: 30px;
padding: 1px;
border: solid 1px #8B92C0;
padding-left: 3px;
padding-right: 3px;
margin-top: 5px;
min-width: 30px;
line-height: 20px;
}
.backrag a
{
color: #242631;
text-decoration: none;
}
.frag a
{
color: #8B92C0;
text-decoration: none;
}
This is how it looked like:
The code is trivial. We just draw a border around the two different span we use in each "button". Each part contains some text. And we use background and color and some properties to determine width and height, suche that everything looks good.
