Change button style

• 

  panamakay · Member · Dec 5, 2019 at 4:08 am

  • Copy link
  • Add topic to favorites

  Hello everyone!

  Do you know a CSS Code on how I can change the buttons colour and hover for all pages? than you so much!!

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

• 

  kokkieh · Staff · Dec 5, 2019 at 9:50 am

  • Copy link

  Hi there,

  When you say hover color, are you also referring to the buttons? So how to change both the base color and hover color?

  You should be able to adjust the base color from within the editor, as a setting for both the button and button text color exist for the button block. But looking at your pages I see invalid HTML errors in each one, meaning there were changes to the blocks’ HTML after the blocks were added, which broke the blocks.

  Using CSS you can change this with the following:

  /* Change button hover and base color */
  a.wp-block-button__link {
  	background-color: blue;
  	color: orange;
  }
  
  a.wp-block-button__link:hover {
  	background-color: red;
  	color: green;
  }

  But I would recommend you start a live chat with us at https://wordpress.com/help/contact so we can take a look at why those blocks on your pages are broken, as that’s going to give you trouble later on if you want to make changes to those pages in future.

• 

  panamakay · Member · Dec 8, 2019 at 4:44 am

  • Copy link

  Thank you so much for the reply! I sent a mail regarding it, hope I can check it soon :)

  I have another question, is there a CSS code to change the font of the tagline of the website, and the tagline only? Thanks!

• 

  staff-zinnia · Staff · Dec 8, 2019 at 2:28 pm

  • Copy link

  Hi – Are you referring to LIBERATION THROUGH MOVEMENT ?

  Generally, font can be stylized through CSS. That means that we can change the size, add italics, bolding, and a few additional stylings.. It’s not possible to change the actual font though beyond what’s already built in the site.

  You can test this out in the CSS section of your site. Open that up and add:

  @media screen and (min-width: 70em)
  .site-description {
      font-family: fantasy;
  }

  The other options that you can test in place of fantasy are available on this screen shot.