Fusion button in slider

[casparsmits]

#650581

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]

#650638

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]

#653094

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]

#653123

Sweet! Glad that helped, Caspar.

I appreciate the follow-up 🙂

mark

[digableinc]

#674630

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

[digableinc]

#674634

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.

[Marijalberta]

#866398

Hi guys,

The above conversation was already very helpful and helped me create the buttons. I also got to add transparency to the buttons, but unfortunately somehow this got overridden somewhere and I can’t manage to get it back again. Does anybody know how to make the buttons slightly transparent?

This is my current code:

[fusion_button link="https://chelp.nu/onze-diensten" text_transform="" title=“ik-ga-ervoor“ target="_self" link_attributes="" alignment="left" modal="" hide_on_mobile="" class="" id=“styled-button" type="flat" transparency=“0.7” bevel_color="#ffffff" border_width="2" size="medium" stretch="default" shape="square" icon="" icon_position="" icon_divider="" animation_type="" animation_direction="" animation_speed="" animation_offset=“"]Meer informatie[/fusion_button] [fusion_button link="https://chelp.nu/onze-diensten" text_transform="" title=“ik-ga-ervoor“ target="_self" link_attributes="" alignment="left" modal="" hide_on_mobile="" class="" id=“styled-button" type="flat" bevel_color="#ffffff" border_width="2" size="medium" stretch="default" shape="square" icon="" icon_position="" icon_divider="" animation_type="" animation_direction="" animation_speed="" animation_offset=“"]Ik ga ervoor[/fusion_button]

This is the website: https://chelp.nu.

I hope someone can help me out!
Best,
Marij

[Author]

Posts