Style Website Input Buttons Consistently

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 *