Where can I Download WordPress Themes?Īre Free WordPress Themes Good for Your Site?
How can I Install These Free Responsive WordPress Themes? How Many WordPress Themes can I Use on My Site?
Once you get your CSS code down, you can just add a class to whatever link you like.Īnd of course, you can also make different buttons to suit different needs. If that’s the case, you can just delete the background color in that section. You might, for example, not want to change the background color, and only change the text color on hover. For example, I started with a blue background and white text, then on the hover, I simply reversed that, with a white background and the same blue text. It’s important to remember to change the colors here if you want your button to change colors. The second section controls what the button looks like once it’s hovered over.Īll that should now be pretty self-explanatory if you’ve gone over the info above. (There are three different lines to account for different web browsers.) The higher that number, the longer the transition. The three different transition numbers control how fast the button changes colors. The second number (35px) is the space to the right and left of the text. The first number (20px) is the space above and below the text. The padding controls how much space is around the button text. For example, let’s say I increased that from 10px to 30px. If you increase that, it will get rounder. The border-radius gives the button a rounded look. The background color and border are self-explanatory. So that will be controlled by the next section of CSS. Then it changes when it’s hovered over it. The line-height gives height for your text, and the font-size is the size of your text, of course. The first section of code determines what the button looks like without any hover effect – i.e.
You can customize this CSS code as you like. We’ll talk about what all that means in a minute.Īnd here’s how that comes out on my site - a nice button with a hover effect. As this changes your theme, you should probably either create a child theme or install a custom CSS plugin so that when your theme is updated, your changes won’t be lost. Make sure to add it to the link code – i.e. In my case, I named my class “my-button”. Give your class a unique name so that it doesn’t conflict with any other classes that might already exist in the CSS of your site. the “Text” section) and add a class to your link.įirst, find the code for your link. Next, you’ll need to go into the code section of your page (i.e. Let’s say you want your button to say “Sign Up Now.” So you just add a link that says that and you can position it where you like. The first thing you’ll want to do is to add a link to your post or page as you normally would. And once you create the initial code, it’s easy to add your own buttons where you like. And those can be good options.īut it’s also easy to create your own buttons in WordPress with a little CSS. Creating buttons in WordPress would seem to be the job of a theme or a plugin.