Learning Report 6

This is my 6th Learning Report that I have done so far, the things I did in this learning report may change over time but I wanted to get it to work first.

CSS Based Button Without Images

I was doing some research online I was finding a lot of CSS to create buttons but most of them where using pictures. I wanted to learn how to do them first without pictures so that I can do some pretty cool thing with them later on.

Source

CoolCss.net

Overview

When doing my research I found many ways using xhtml and using css in creating a button using images. I did not want to create any images yet because I am still working on colors and working on other details pertaining to my website. So I wanted to learn a way to create a button without using any images. I found this code while doing some research and decided to implement it in my website. I will probably change the colors and such as time goes on but I wanted to get this down first and understand it first.

I learned that there was a way. The css code is pretty simple compared to a lot of other code that I found. Some included mouse overs and such. But this only have css for the box or the link and then another css code for 'hover' or when your mouse hovers over the link then it changes the colors and such. I think its pretty neat.

Implementation

You have to update both the CSS and the xhtml when you are doing this button layout. Here is the code that I found:

To implement the xhtml code its fairly simple. Just go to the link you would like to create into a button and in the tags add a class. Then you set the class="css_button_example" This will then change that link into that. Here is an example:

Button Example

You can also check up above and see in the navigation bar similar example. It may change later on in time but at least I got the concept down.