Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 Users – Part 16 – Create a Button for a Link

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

There’s one last thing in this Introduction to HTML for WordPress and Genesis 2 Users seminar that I want to do with these testimonial boxes and that is to style a link tag here. So far we’ve added structural HTML to them and structural CSS to style them. Now let’s add a link tag to this text.

Add the Link

I’m going to make this bottom tag right here a link. First I’m going to give it a new paragraph and then I’m going to give it a link. Update it and reload it. So now we have “Learn more about this service” but I want to do is I want to take this link and I want to turn it into something that looks like a button so I’m going to change this quite a bit.

Create the Look of a Button

We’re going to come back over here to .testimonial, .testimonial a and I’m going to say background-color:#888, color white which is #fff, padding:10px at the top and bottom and 20px on left and right and border-radius:5px.

Change the Hover Condition Style

Let’s reload that and now we have this “Learn more about this service” button and I think the next thing I’m going to do with that is make a somewhat different style here for the hover condition. So .hover and now the background color will be say #666, the color will be #888 and we don’t care about the padding and the radius, they’re going to stay the same no matter what.

I think I must be missing my closing bracket, there we go. So we changed the background color and the color on the hover condition. Let’s see, that’s not dark enough, is it? So let me take our hover color and make it #0000 and now we’ve got a button that changes color when you hover over it and it stands out like a button. Actually, let’s just change that color back. Let’s make this #0000 and this #fff, there we go.

So that’s structural HTML and since we haven’t given this any dimensions it stays responsive, right? If we have given it a width dimension or something like that, it wouldn’t have worked responsively but because we didn’t we do that and we let it be what it’s going to be it stayed responsive in the inside of Genesis.

0 Comments… add one
0 comments… add one

Leave a Comment