Need to create rounded buttons using CSS in the Revolution Slider or in your WordPress website? Here’s a how-to video to show the easy steps.
Free Custom Corner CSS3 Generator
http://www.cssportal.com/css3-rounded-corner/
VIDEO: CSS Tips for Beginners
https://youtu.be/rHtIMcUGQjg
VIDEO: What is CSS & How to use it in WordPress?
https://youtu.be/7kspU4Ge_5I
Full Video Transcript
Hi y’all! I’m Kori Ashton and this is another WordPress Wednesday! Thanks for tuning in! If you haven’t subscribed yet…I’m going to put the button right down here. Please take a second and subscribe to our Channel, because every single Wednesday we’re releasing some sort of really awesome, fun WordPress video. Just to help you and help grow the community.
We do everything from; simple basic beginner stuff. All the way to advanced fun stuff. Social media, SEO- anything having to do with specifically WordPress!
Another great, incredible three resources that you can find having to with WordPress are these three awesome resources here:
WP Engine- if you need a hosting company. They provide an amazing service there; with great security and an awesome staging environment.
Also, if you’re an entrepreneur looking to build your client list, learn how to sell better. Check out WP Elevation. Plus, they’ve just asked me to blog for them.
This month I’ve produced my first blog article over in their resource center. Please be sure to check them out.
WP-101 if you like WordPress video tutorials please stop; go check them out, because they have some free resources for you as well as a really great library that you can checkout for a very minimal fee. When it comes to how cool those crazy kids are over there with WP 101.
All right. Are you ready to learn how to make rounded buttons Inside of the Rev-Slider?
I’m going to show you two different things today:
1) How to make rounded buttons inside of the Rev-Slider (if you’re not using the Rev-Slider, just how to make them with CSS.)
2) How do I make round buttons with CSS without having to go into Photoshop (and do all that silliness.)? I want to learn how to be a cool-nerdy guru and make that happen.
So, let’s go to the Rev-Slider first.
I’m going to shrink down here a little bit. If you’ve already been watching my video tutorials on the Rev-Slider, you’ve already gotten to this point with me. We’ve already made this button. All right. If you’ve not watched that, I’ll put the link just here. So you can stop, go watch that video because we’re not going to backtrack.
I’m going to show you right here. We’ve already made a button. Obviously, it’s in this rectangle shape so I would like to make it have rounded corners. How do we that?
It’s extremely simple!
So, I’ve clicked on that button. I’m going to click “edit” “style.” This is the simple editor. Check this out. Your mind is going to be blown! Right down here, we have something that says “radius.” This is going to be your four corners… for our square, or our rectangle that we have going on up here. Okay. These are our four corners. You can play around with adding different styles to it. There you go. That applies it.
If you only put one number in that applies it to all four corners. Or, you can play around and be silly and just do different things. I mean look at that. That’s kind of fun-odd shaped. This one puts that random number over there.
That’ s kind of different. Maybe we’ll go crazy on this one. Really round it out and make it look loopy. You can have all sorts of fun and play around with the different corners. Or, you can simply just put in here “fifty” and have it look like that. I mean, that’s extremely rounded. I kind of like the look of maybe the “twenty.” That’s really nice.
So, that’s how you make rounded corners inside of the Rev-Slider. But how do you write that CSS to make that happen outside the Rev-Slider?
I have found a really cool, free (free is always in the budget,) resource for you.
(I’m going to put this link in the description box below as well.) This actually writes the nerd code for you. It’s amazing!
So you would come here and kind of check this out. You can play around with this. You can play around with the colors here and literally just drag, drop, click around.
Right now thought you can see that it has this kind of burgundy border. I really don’t want my button to have a border. So, I’m going to remove the border completely. You can play around with that though. You can change the styles and obviously you can change that color and it’s going to write all the nerd code for you.
Ultimately what this widget does for you is it writes this bit of nerd code over here.
That’s where you’re going to copy and paste into your style sheet. Whether you’re using a custom CSS box that maybe your author has allowed you to have. Or, perhaps you’re using a child theme. That’s always the right way to do it, right? So that we’re not having any sort of overrides happen whenever we have to update our WordPress website.
If you don’t know what I’m talking about, or if that sounded really odd to you; I want you to go checkout our child theme-CSS box. How to do it with a plug-in, or how to write a child theme? You need to know how to do that so you don’t loose any of this customization whenever there are updates to be made.
The other really cool thing about this awesome free resource is it actually tells you what browsers this little nerd code is supported by. So you can see it goes all the way back to Firefox 3.5 and back to IE 9. All right.
The other thing you’re going to do is play around with the corners. This is the same idea of what we just saw. Do you want all the corners to be the exact same?
So, I’ll show you as we drag it around here. You can see it in this area up here kind of making changes as I play with this slider back and forth you can see the different variations. Or, again if you want custom corners it allows you to play around with the different angles there. So, super cool! It writes the nerd code. You would take this bit of nerd code. Copy it on your clipboard. Command “C” or on a PC it would be control “C.” You would go then into your style-sheet (which should look something like this.) You would paste it into that area that affects that square, or that rectangle, or whatever type of button that you’re trying to make rounded corners take place on.
Ah, how cool is that y’all! A little bit of nerd code for you! I love it!
Be sure to subscribe to our channel so that every single WordPress Wednesday you can be checking out a great tutorial like this.
If you have any questions put them in the comment box below. I’ll do my best to answer them!
Have a great day! Bye, bye y’all!
