Contact Form – Send Button Colours

• 

  tbcars · Member · Mar 1, 2017 at 10:14 am

  • Copy link
  • Add topic to favorites

  Hi,

  Could someone please tell me the CSS to change the colours of the button on this page http://djmetalwork.co.uk/contact/

  I want to change the static and hover colours.

  Thanks for your time.

  Tom

  The blog I need help with is: (visible only to logged in users)

• 

  aakashpatelsite · Member · Mar 1, 2017 at 11:07 am

  • Copy link

  Hi,
  To change the color of the “send” button on the contact page of your blog, add following CSS

  input[type="submit"] {
      border-color: black;
      color: black;
  }

  And to give hover effect add following CSS

  input[type="submit"]:hover {
      background-color: black;
      border-color: white;
      color: white;
  }

  You can give color according to your requirements.

  Thanks,
  Aakash Patel

• 

  tbcars · Member · Mar 1, 2017 at 11:45 am

  • Copy link

  Thanks very much!!!

• 

  seachangeeditor · Member · Mar 1, 2017 at 3:14 pm

  • Copy link

  Thank you, this post was very helpful and I added it to my blog. I noticed my Submit Button in my Subscription widget doesn’t have a border. Is there a way to override the theme and add a border?

  https://blog.seachangemn.com/

• 

  seachangeeditor · Member · Mar 1, 2017 at 5:24 pm

  • Copy link

  Update: blogseachangemn.wordpress.com

• 

  thesacredpath · Member · Mar 3, 2017 at 5:38 am

  • Copy link

  Hi @seachangeeditor, I’m seeing no content or widgets on the site you referenced. I also do not see that you have the WordPress.com Premium Plan upgrade, which would be required to add custom CSS to your site.

• 

  seachangeeditor · Member · Mar 3, 2017 at 2:21 pm

  • Copy link

  Sorry about that thesacredpath, I was testing something and changed my static front page. I currently have the Business Plan and able to add custom CSS to my site. I would like to add a black border to my submit button in the Blog Subscription section.

  Blog: https://blog.seachangemn.com/

• 

  thesacredpath · Member · Mar 3, 2017 at 7:32 pm

  • Copy link

  Hi, thanks. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. You can adjust the 2px width and color code as desired.

  form input[type="submit"] {
    border: 2px solid #fff !important;
  }

• 

  seachangeeditor · Member · Mar 3, 2017 at 7:51 pm

  • Copy link

  Thank you so much! I was missing that !important section.

• 

  thesacredpath · Member · Mar 3, 2017 at 8:03 pm

  • Copy link

  You are welcome. Most of the time we try to construct the CSS selectors in such a way that we do not need the !important keyword, but in some instances, like this on, we have to use it.