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

    Is it possible to get the Button Element to have the same options as the Fullwidth Button Element.

    I like how the Fullwidth Button Element allows you to have the color options for Background Color and Background Hover Color.

    The Button Element only gives you the option for Custom Background Color and no Hover Color option.

    If it is possible to make the Button Element have the same functionality as the Fullwidth Button Element that would be great!!

    #607265

    Hi Micheal0424!

    Please add the below CSS in Enfold > General Styling > Quick CSS

    
    .fwbtn {
        width:auto!important
        padding:1!important;
    }
    
    .fwbtn .avia-button-center {
        display:inline-block!important;
    }
    
    #top  .av-fullscreen-button .fwbtn .avia-button-fullwidth {
        padding:15px 20px;
        border-radius:3px;
        margin: 1em;
    }
    
    .fwbtn .avia_button_background {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin:0!important;
    }
    

    Enable custom class name for ALB elements

    Add class name fwbtn to the fullwidth button to make it look like a regular button.

    NOTE: This has some limitation like alignments which you will need to do it using more custom css.

    Best regards,
    Vinay

    #607279

    I actually wanted it to be the other way around.

    I like the functionality of the fullwidth button and would like the regular button to have the ability to control the button background color and the hover color like the fullwidth allows.

    Thank you.

    #607663

    Hi!

    for background color use this code inside of Quick CSS field:

    a.avia-button.avia-icon_select-yes-left-icon.avia-color-theme-color.avia-size-small.avia-position-center {
    background-color: red;
    }
    

    For hover use this:

    a.avia-button.avia-icon_select-yes-left-icon.avia-color-theme-color.avia-size-small.avia-position-center:hover {
    background-color: blue;
    }
    

    Cheers!
    Andy

    #607745

    Perfect, thank you.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Button Element to be like Fullwidth Button?’ is closed to new replies.