change the "more" buttons

• 

  kimandrebusk · Member · Oct 14, 2016 at 8:04 am

  • Copy link
  • Add topic to favorites

  change the “read More” buttons to rounded shape with mouse over color effect. Like you show on the teaser

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

• 

  siobhyb · Member · Oct 14, 2016 at 2:24 pm

  • Copy link

  Hi there,

  Creating buttons in the same style that you see on the theme’s demo site requires a little bit of HTML.

  In case you’re not already aware: HTML is coding language that’s used to structure sites across the web. We have an introductory guide available here and you can add HTML to posts/pages by first selecting the HTML tab in the upper right hand corner of your editor.

  The HTML that you need to add to create the blue button that you see on Pique’s demo looks similar to the following:

  <a href="#post-116" class="button">What’s on now</a>

  For the white button, the HTML would look similar to this:

  <a href="#post-128" class="button minimal">Pay us a visit</a>

  If you’re trying to create a more button, then replace the text within a tags with “More” and then enter the URL to the page you wish to link to after href= e.g. href=”exampe.com/about”

  Let me know if that’s clear or if you have any extra questions.

• 

  kimandrebusk · Member · Oct 20, 2016 at 8:42 am

  • Copy link

  Great help! thanks. One problem still….. the button should Work the other way arround with colours.

  Now it´s White or blue colour and the when mouse over it goes to transparrent (you can se the background in the button).

  I would like it to show background in the button before mouse over and the the White or blue colour appears when mouse over.

  Is this possible?

  BR
  Kim

• 

  siobhyb · Member · Oct 20, 2016 at 10:45 am

  • Copy link

  Hi Kim,

  More advanced customisations, such as what you described, are possible if you upgrade to the WordPress.com Premium or Business plans.

  Both of those plans include the ability to add custom CSS. If you choose to upgrade, then you can achieve the behaviour you’re after by adding the following snippet to the CSS panel of the WordPress.com Customizer:

  .button {
      background-color: transparent;
      border-color: #83b6cc;
      color: #83b6cc;
  }
  
  .button:hover {
      background-color: #83b6cc;
      color: #eff6f9;
  }

  Hope that helps out.