Custom Button Font & Color

  • Resolved rpete40819

    (@rpete40819)


    2 years, 4 months ago

    I have created a custom Request Quote button on the site menu navigation and CSS code. The problem is I would like to have the font and color of the text on the button different than the font and text color on the navigation. The theme seems to be overriding the CCS for the button font text & color, everything else works.

    Below id=s the CSS for the button:

    .butn {
  background: #ff9d00;
  background-image: -webkit-linear-gradient(top, #dd1111, #ff9d00);
  background-image: -moz-linear-gradient(top, #dd1111, #ff9d00);
  background-image: -ms-linear-gradient(top, #dd1111, #ff9d00);
  background-image: -o-linear-gradient(top, #dd1111, #ff9d00);
 background-image: linear-gradient(to bottom, #dd1111, #dd1111);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 3px;
  text-decoration: none;
}

.butn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

    Any help in resolving this issue would be appreciated.

    Thanks,
    Rod

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi Rod,

    Try this selector (below), instead of just .butn. Because .butn is attributed to the element that wraps the button link — not the button link itself.

    
#mainnav ul li.butn a

    So your code will look like this:

    #mainnav ul li.butn a {
  background: #ff9d00;
  background-image: -webkit-linear-gradient(top, #dd1111, #ff9d00);
  background-image: -moz-linear-gradient(top, #dd1111, #ff9d00);
  background-image: -ms-linear-gradient(top, #dd1111, #ff9d00);
  background-image: -o-linear-gradient(top, #dd1111, #ff9d00);
 background-image: linear-gradient(to bottom, #dd1111, #dd1111);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 3px;
  text-decoration: none;
}

#mainnav ul li.butn a:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
    Thread Starter rpete40819

    (@rpete40819)

    Hi Kharis,

    It worked! Now that you have explained it, it makes perfect sense why my code wasn’t working.

    Thank you so very much.

    Regards,
    Rod

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom Button Font & Color’ is closed to new replies.