Avada › Forums › Community Forum › Fusion button in slider
Tagged: button, css, Shortcode, fusion button, button styling
-
AuthorPosts
-
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,
CasparHello 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!
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,
CasparSweet! Glad that helped, Caspar.
I appreciate the follow-up 🙂
mark
I am experiencing this as well. The configuration of the button is quite the departure from the rest of the theme.
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.
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 -
AuthorPosts
- You must be logged in to reply to this topic.