The last thing I want to do in this introduction to HTML for WordPress and Thesis Users seminar is to create a button out of a link. The way that we’re going to do that is to turn this into a link. So I’m going to come over to this, click the link button, let’s see, it doesn’t really matter what I pick, I’ll pick Fresh Baked Bread and I’m going to change the title of this link to “Learn More by Clicking on this Link”. We’ll open it up in a new one, add the link.
The other thing we’re going to do to that is give it a class and so I’m going to give it a class of “learn-more”. Hit update and reload. Obviously, it turned into a link so it changed that aspect of it but adding “learn-more” to this didn’t change anything else.
Remember when I was talking about how inline elements can’t take height and width? Well, that means that it also can’t for example, can’t take padding. So if we say, .learn-more and I added 10 pixels of padding all the way around it and give it a background color, let’s give it #404040 again.
This is not going to have the desired result, oh it did have the desired result. Okay, my mistake about padding. Obviously an inline style element will take padding. But for example, I won’t be able to make it 100 pixels tall because it has to be a block level element in order for that to happen.
Using Display Block
Now, as it turns out, you may very well just want to use padding to define this but if there is a reason why you needed height, you would need to add the declaration display block to it so that it would behave like a block level element.
This happens with link tags all the time and as soon as you tell it to display like a block level element, you can give it a height but it also expands to fill the space. Notice here that it got wider. The reason it got wider is because we told it to display block and a block level element takes up as much room as it can horizontally and then expands however tall it needs to be in order to take up its content. In this case, because we give it a height of 100 pixels, it did that.
I’m going to add color: white, actually #fff, okay. I think here, we’re going to say, text-decoration:none; and then we’re going to create a new one, .learn-more:hover, this is the pseudo class. This is a style that’s going to kick in when your mouse hovers over it and in this case, we can say background-color: let’s grab a much lighter color #9c and then let’s change the color of the text to #404040.
So now you can see when we hover over this, we get the little button change. If you want to round those corners too…there you go. Notice this one hasn’t changed for a number of reasons actually. One is it’s not a link and secondly, we haven’t added a class to it.