Change text colour buttons

• 

  thehabitmagazine · Member · Jan 31, 2017 at 4:01 pm

  • Copy link
  • Add topic to favorites

  Hi there can I change the text colour of the buttons? I bought wordpress.com premium. Your help is highly appreciated!

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

• 

  aakashpatelsite · Member · Feb 1, 2017 at 9:40 am

  • Copy link

  Hi,
  To change the color of the text of the button give class name same in all the button for example you have given class name as class=”btntxtclr”.
  Then apply the following CSS:

  .btntxtclr
  {
      color:#ffffff
  }

  Here I have given color as #ffffff, you can change it as per your requirement.

  Thanks,
  Aakash Patel

• 

  staff-loquaciousloon · Staff · Feb 1, 2017 at 4:47 pm

  • Copy link

  Hi there!

  I just took a look at the site (I always try to open the link before I reply so I can make sure I’m on the same page when I answer!) and unless I miss my guess, you’re looking at the Read More buttons on your home page? :)

  If so, you can target them with the same class the theme is already using:

  .featured-page .more-link {
      background-color: #00006b;
  }

  That will change those to a nice blue color – but you can always swap out a different color using HTML color codes :)

  Some themes use a .button class that you can add to links. You could also target that class (instead of manually adding your own to each button) if needed :)

• 

  thehabitmagazine · Member · Feb 2, 2017 at 2:47 pm

  • Copy link

  Thank you so much for your replies!! If you check out the website you have the editions button on the top. When you click on it you see the letter in white and the colour around it in magenta. I want that the other way around. Letters in magenta and white frame. Is this possible?

  Cheers, Haroun

• 

  staff-loquaciousloon · Staff · Feb 3, 2017 at 2:23 pm

  • Copy link

  Do you mean the submenu that opens when you click on the button beside Editions?

  If so, this CSS should reverse the colors:

  .large-screen .main-navigation ul ul a {
      background: #fff;
  	  color: #dc0067;
  }

  If you’d also like to style the button itself, you can try adding this CSS:

  .large-screen .dropdown-toggle:before,
  .large-screen .main-navigation .menu-item .dropdown-toggle:hover:before {
  	border-top-color: #dc0067;
  }
  
  .large-screen .main-navigation ul ul a:hover, .large-screen .main-navigation .menu-item .dropdown-toggle:hover, .large-screen.hero-image .main-navigation .menu-item .dropdown-toggle:hover {
  	background: #fff;
  }
  
  .large-screen .main-navigation .menu-item .dropdown-toggle.toggle-on:hover:before {
  	border-bottom-color: #dc0067;
  }

  Is that what you had in mind? :)