• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Website Design CSS Styles

Style Website Input Buttons Consistently

September 19, 2013 Updated on December 13, 2018 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

CSS Button StylesSome 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;
}

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    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.

    Reply
    • Marcy Diaz says

      Thank you for your kind words! I agree with you, Marcus. Plugins often use their own styles, instead of the theme styles making styling difficult

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework