Home Forums Community Forum Fusion button in slider

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • casparsmits
    Participant
    Post count: 2

    Hi all,

    I’m making a slider and there’s a section to add a fusion button. I have put in this code:

    [fusion_button link="https://example.com" text_transform="" title="more-information-button" target="_self" link_attributes="" alignment="left" modal="" hide_on_mobile="" class="" id="" color="#ed6921" button_gradient_top_color="#ed6921" button_gradient_bottom_color="#ed6921" button_gradient_top_color_hover="#ed6921" button_gradient_bottom_color_hover="#ed6921" accent_color="#ed6921" accent_hover_color="#ed6921" type="flat" bevel_color="#ed6921" border_width="2" size="medium" stretch="default" shape="square" icon="" icon_position="" icon_divider="" animation_type="" animation_direction="" animation_speed="" animation_offset=""]More information[/fusion_button]

    The button renders without background color or border. Does anyone know how I can format my button? When I change the text, that does change, so it is properly linked.

    Where the button is shown: https://straightdental.com/dev/home/

    I hope you can help me!

    Best,
    Caspar

    marklchaves
    Participant
    Post count: 441

    Hello Caspar,

    This is an interesting problem. Thanks for posting. Kudos to you for supplying the critical pieces of info needed to look into your issue (code and link).

    I was able to reproduce what you described and what I saw on your dev page. It seems that any styling done in the shortcode is being overridden somewhere.

    I’m sure one of the admins for this forum can confirm whether my guess is true or not. I didn’t see anything in the docs. But, I could have missed it. And, I verified that your shortcode is syntactically correct.

    https://theme-fusion.com/documentation/fusion-builder/elements/button-element/#params

    Anyway, here’s what I suggest.

    First, for the code snippet you kindly provided that’s in your slider/page, set the id field to something. E.g.

    id="styled-button"

    Then, add the following custom CSS to your page.

    
    /* 
     * Button Styling Fun for Avada Forum Post 
     * Change any of the values as needed.
     */
    
    #styled-button {
        background-color: #ed6921;
        border: solid 2px white;
        color: white;
    }
    #styled-button:hover {
        background-color: #ed682179;
    }
    
    

    Live demo here (excuse the mess–it’s a prototyping page).

    https://marklchaves.com/itsonlyrockandroll/

    How to add CSS here.

    https://theme-fusion.com/documentation/fusion-builder/how-to/how-to-add-local-custom-css/

    Good luck!

    casparsmits
    Participant
    Post count: 2

    Hey Mark,

    Thank you for the confirmation, I thought I was going crazy. And thank you for the solution, it works! Since I’m adding many buttons of these, I used class instead of ID, and now have have the control back on my buttons.

    Thank you for your reply!

    Best,
    Caspar

    marklchaves
    Participant
    Post count: 441

    Sweet! Glad that helped, Caspar.

    I appreciate the follow-up ūüôā

    mark

    digableinc
    Participant
    Post count: 2

    I am experiencing this as well. The configuration of the button is quite the departure from the rest of the theme.

    digableinc
    Participant
    Post count: 2

    I found out where the slider buttons are being overridden.

    Avada > Theme Options > Fusion Builder Elements > Buttons

    Those colors are overriding the fusion button code on the sliders.

Viewing 6 posts - 1 through 6 (of 6 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.