Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #20741

    Hello –

    I am currently trying to change the text color on a few of my buttons but am having no luck.

    For example, I have one of my buttons set up like this: [button size=”xl” color=”red” text=”light”]Button![/button] – In this case, the text shows up as kind of a grey color, making it difficult to see with the red button.

    I would like to know how to make the text color white. Any way to do that?




    This is the CSS for the shortcode you are using

    body .avia-button.red, body .avia-button.red:hover {
    background-color: #B02B2C;
    border-color: #B02B2C;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #5d1a1b;

    To get white color you would add the code below to /css/custom.css file or to quick css located in Choices > Theme Options > Styling .. at the bottom of the page

    #top .avia-button.red, #top .avia-button.red:hover {
    color: rgb(255, 255, 255);

    The code above will change the color to white for the button in its normal state and during hover (mouse over).

    If you want to have the text in one color during its normal state and another color during mouse over (hover event) you would use code below which is currently white/white to whatever colors you want.

    #top .avia-button.red {
    color: rgb(255, 255, 255);
    #top .avia-button.red:hover {
    rgb(255, 255, 255); /*color during hover*/



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

The topic ‘Changing Button Text Color’ is closed to new replies.