Style Website Input Buttons Consistently

Share this:

CSS Button Styles

Some WordPress website themes style their input buttons so that they inherit the browser styles in iOS. The buttons will be rounded with a gradient as the top button above. If you see this with your theme, but you prefer your own button styles like the bottom button, you will need to add a line of CSS to your button styles.

Sometimes you may even find CSS that was added to make sure that the iOS button styles are used:

 -webkit-appearance: button;

Let’s get started.  Search in your style.css below the Reset section for input[type=”submit”], input[type=”button”], and/or button. Then you can add

 -webkit-appearance: none;

to the CSS that already exists.

Remember you need to edit either a child style.css, or you need to add styles with a Custom CSS editor like the one in Jetpack.

If you use a Custom CSS editor you can add this new section:

input[type="submit"],
input[type="button"],
button {
     -webkit-appearance: none;
}

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

2 responses to “Style Website Input Buttons Consistently”

  1. Getting all the buttons to be consistent (font, color, hover, size, etc) throughout a website is always a huge pain. Especially when plugin authors are bound and determined to use their own custom css files for their plugin instead of using the child theme css.

    I usually just rename the plugin css files so that they are not used and be done with it.

    I enjoy your blog posts immensely.

    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *