Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 23, 2020 at 6:29 pm #1177787
    mmsdev

    Hi.

    I am trying to achieve full width transparent buttons.

    I am using this from an old thread:

    .your-custom-class-white a { background: transparent !important; border: white 3px solid !important; color: white !important; }
    .your-custom-class-white a:hover { background: rgba (255,255,255,0.5) !important; }

    This part works very well when add the class within Advanced > Custom CSS Class of the button element – Very happy!

    But I wish to take it further:

    1: The second part does not work:

    .your-custom-class-white a:hover { background: rgba (255,255,255,0.5) !important; }

    2: I would also like the transparent button to have a slight colour to the transparency foe example: #a81010 and control the level of transparency

    Any help would be welcome!

    I have added private content too.

    January 23, 2020 at 6:56 pm #1177806
    mmsdev

    don’t worry you can close this thread.

    For those that want to do the same i used this and it works a treat:

    /* Button opacity */

    .my-custom-fullwidth-button .avia-button-fullwidth {
    background: rgba(168,16,16,0.33) !important;
    }

    /* Background on hover */
    .my-custom-fullwidth-button .avia-button-fullwidth:hover .avia_button_background {
    background: rgba(14,179,77,0.66) !important;
    }

    /* border radius */

    .my-custom-fullwidth-button .avia-button-fullwidth {
    border-radius: 10px;
    }

    /* Solid border */

    .my-custom-fullwidth-button .avia-button-fullwidth { border: white 1px solid !important; color: white !important; }

    January 24, 2020 at 8:48 am #1178026
    Rikard

    Hi,

    Great, I’m glad that you got it working and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Transparent Full Width Button’ is closed to new replies.