Build Your Own Business Website header image

How to Create a Submit Button Using CSS3 Gradients

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 discuss how to create a submit button using a button maker that automatically generates the a code which you can very conveniently grab and paste into your Custom CSS.

Video Transcript

Yeah you know, I don’t think you can but you know, this is the perfect segue into something I prepared for the day which was how to create a button like that using the new CSS3 standards…new CSS3 gradients. I’m going to show you how to do that right now and you can easily do this with any form of a submit button.

Perfect.

Okay so what we’re going to do here is we are going to go to a site called… this is a great site too, by the way. I mean, I’m just totally enamored with this site. It’s called csstricks.com an then examples button maker. And what this is is you’ve seen make buttons like this in the past with images and I’ve also made buttons like this with the J box. But I’m going to show you how to make this without doing that at all, without any button load or anything like that.

And I’m going to actually show you what that looks like here. Here’s that button here, right? It’s a gradient button that is really 2 images. It’s the non-hover state image and it’s the hover state image. And if we look at this in Web Developer for a second, let’s see I think it’s tools. No, no pardon me. It’s over here under Standard compliance mode. Come over and take a look at the media you know, there is an image right? That is 2.52k and then I have a… let’s see, here’s another one. The subscription options button that is even more, 5.86k and learn more button. And so all of these are actual images, right? They aren’t CSS3 tools. Well, this thing is going to create a CSS3 image and I’m just going to use exactly the same colors that I use now.

And so for my top gradient color, go ahead and click that and I’m just going to insert my top gradient color that I use. And then for my body color gradient, I’ll insert the light yellow or the light orange. And then for a top border color, I’m going to select even a lighter orange to make that sort of reflective. And then for my hover background color, I’m going to go back to this dark orange and for my active background color, I’m going to go to the dark orange. And let’s see, then I wantto make everything bigger so I’m going to make my text bigger. That’s padding bigger, I’m going to make my text bigger. And let’s see, this adjusts the roundness of the corners. This one adjusts the padding size and this one adjusts the text size. And then if you hover over, you can see what it looks like. I’m going to actually change my hover text color to make it lighter and I’m going to use efefef which is lighter grey. Nevertheless, you get that color there.

Okay so now this is the button this is going to create. And now if you click on that button to see the CSS, it gives you all of the CSS for this. So I’m just going to copy it and then I’m going to come over to the site here. Let’s see, NextGen gallery site. Do I have… I need to find a button actually. Okay, I’m going to make it affect this submit button here because this is…so comment form, input form submit. I was actually going to show you how to do it with the link but I’m going to start off with the submit button since that’s what you asked for.

.custom and then let’s just copy that. V and actually, I’m going to paste… pardon me. I need to go back and paste that, copy that code again. Back to here, copy it, come back over to Web Developer , paste it. Now this doesn’t… this obviously does not apply currently to it but if I copy this name and I replace .button with it. And then if I do the same thing with hover, there we go. And the same thing with active, now you can see the… I guess the only other thing I’d need to do would be to modify a couple of the other things about this. Let’s see, comment form, border width, this one here, border width 3 pixels. I don’t want to get rid of that and I guess I’d want to get rid of that border width. Yeah, we’ll get rid of that width. I mean, so there’s a couple of things in this default…yeah, there are a couple of things in this default button that you’d get rid of in order to make it work properly. But let’s see, let’s just go ahead and copy this stuff. Control copy… let’s see, we don’t actually have an active form of this button and I think that’s causing that problem. There we go.

So now you’ve got this submit button that’s been changed and this will actually work for any submit button, right? So if you’ve got a submit button on a comment form or contact form 7 or on an AWeber form or anything, all you have to do is put the selector for that button here and then impose that over the code.

I’m going to do one more thing with this and that is to create a link for this and show you how to do that with a link. Let’s see, where did that go? Using the NextGen gallery, we’re going to edit this page and in this page, I’m going to add a link to my website. So the text is going to be “Visit my website.” And then I’m going to surround that in a link… www.byobwebsite.com, open it up in a new tab like that and then I’m just going to give this a class. And I’m going to give it a class of let’s say, orange. Class equals… well actually, I’m going to give it the class of button. If I give it a class of button then that other code will work just fine.

So if we update here and then we go back over to this NextGen gallery, refresh it, so there’s my link, right? Then what I’ll do is come back over to the custom CSS file and come back over to the button maker. Again, copy this text, paste it and now this ting says visit my website.

And so I’ve create this button here and all the styles of that button using that generator and then I’ve pasted it in to my custom CSS file and I’m going to do that and make it real now. Here I am in my actual custom CSS file and not my other… not the Web Developer version. Save it, open this up in Filezilla and that is in NextGen which is down here. WP content…oh okay, themes, thesis_182, custom, custom CSs. We’ll just upload that now, come back over and look at the site. There it is.

So now we’ve got this button the way we designed it in that form.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment