Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #404281

    I have light transparent buttons on my site that upon hover change to the theme color which works great. The only thing I wanted to do add is a black opacity behind the button so the button text stands out more when it is light transparent. I noticed that the light transparent buttons on the fullscreen slider buttons do this which is the look I’m trying to acheive. (See attached images) How do I modify the code below to add the opacity? Thanks!

    .clear-button a.avia-button {
    background: transparent !important;
    border: 3px solid white !important;
    }
    
    .clear-button a.avia-button:hover {
       color: white !important;
        border-color: #2c5b9c !important;
         background: #2c5b9c !important;
    }
    
    .clear-button a.avia-button { color: white; }
    
    #404860

    Hey djshortkut!

    add this code to control opacity for the button:

    .clear-button a.avia-button {
    opacity: 0.7;
    }
    

    Regards,
    Andy

    #404871
    This reply has been marked as private.
    #405924

    Hey!

    ah now I get what you mean. Remove this code:

    .clear-button a.avia-button {
    background: transparent !important;
    }
    

    and replace it with this:

    .clear-button a.avia-button {
    background: rgba(0,0,0,0.7);
    }

    With the last number (0.7) you can control the opacity.
    Hope this helps.

    Best regards,
    Andy

    #406104

    Thanks Andy, that’s exactly what I was looking for! You can close this thread.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Button Opacity’ is closed to new replies.