Build Your Own Business Website header image

How to Style HTML Links as Buttons

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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.

In this session we show how to style HTML links as buttons by creating the button and then customizing it in Custom CSS.

Video Transcript

Member: I’ve been playing around with some buttons on the site, I’m not sure I were to use buttons or a slider.

Rick: Okay.

Member: With the buttons, they’re basically images inside of divs so that the divs will float and line up the way I wanted to…

Rick: Okay, it wouldn’t have to be that way though, you can make them links.

Member: Links in… what sense?

Rick: Well, that’s what they could be, they could be <a> tags or link tags that have images or background and you can float those things around the way you want them. Just like you would a div.

Member: Okay.

Rick: What does it look like? What’s the URL?


Rick: m, y…

Member: r, i, i,

Rick: And this is the image here?

Member: Yeah, the four buttons.

Rick: Yeah, those don’t need to be images anyway. You wouldn’t want those to be images, you can do all these in just straight css, yeah.

Member: Okay, that’s what I was… yet they were looking different than I had started with images that were transparent in the back and then it dawned to me, I could probably just use texts in the divs. I wanted them to line up this way with a larger image and then have the freedom of being able to add more or take aways some art but it has to hold the whole thing with the slider so… I’m more of experimenting.

Rick: Yeah, I got you. Let’s see… okay… this kind of image is probably best done as a jpeg rather than a gif just for future reference. It’s going to look smaller and look better. Gifs aren’t particularly good, are better with simple images than this. But if we’d come back over to this site for a moment… let’s see… manage… no. Editor… Manager, Restore Defaults… and then in your front page, your featured box, you’re doing two columns, two-thirds, one-third.

Member: Actually, I think it’s just one but I probably should do two.

Rick: Yeah, you should do two. It’s going to be more better as two because it would be more responsive as two. Now you just grab the Agility Column, add a new column and this will be Featured Box Links. Links, that’s going to be one third. This will be two thirds. Inside this, we’ll take the widget area and move it in the links and then here we’ll just add a text box for the image. We don’t need anything for that. Save that. Then you come back over to your Skin Content and Feature Box Image, actually, I’m just going to type it out. <img src= and then that… okay, so there is our image, it will save all the automatic <p> tags for that.

Okay. Then I’m going to say… Let’s see, I think what we’ll do is come over to our Appearance and Widgets. Do I have… I know I have a Black Studio TinyMCE widget there so I’m just going to come over to Pages and do it inside the Pages then. And what were your links? They were Advisors, Head Office, Consumers and Join/Renew, okay. Advisors, Head Office… what are the other two?

Member: Consumers and Join/Renew

Rick: Okay, set it up as a link and I’m going to, I’m just going to fool around. It doesn’t really matter what we do. Okay, so we’ve got my four links here and then let’s see, let’s just update that for a second. Then come back over to Appearance and Widgets. Take a Text widget and drop it in there. Put those four links in. Then we’re just going to call this buttons, I don’t know, it doesn’t really matter what it is.

At which point, if you are not using… are you using the supplemental widget style already? Let’s just create it straight from css. So, we’d come over to custom css and now we can say

.buttons a{ and display:block; width: call it 150 px; padding: top and bottom we’d give it 10px and then left and right 0; text-align:center background-color:blue; let’s see border-radius:10px; let’s give a text-color:white; and then we’re going to change this up for the hover condition… pardon me… and then let’s see… color:#efefef; background-color:#666; let’s say margin: and let’s say 10px top and bottom, 5px side to side and let’s float left…

Member: I think you forgot the colon

Rick: I see that… okay, that looks pretty good. Okay, not enough for a room… or my float left is misspelled. float:left; so there’s not enough for a room for both of those there so that’s what happens if we take this down to… okay, so we take buttons down to 125. There you go. Now you could give this some top margin, you can give it more top and bottom margin to split them up. You know, you can just position them around that way but then in this case what happens when it gets smaller, you’d see that it drops down to the other side by side until it doesn’t work anymore and then they go like that. So, if you’re going to do buttons, you would want to do the links like this.

Member: Alright.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one