Button widget — remove red flash on load, add white border, and only show on mobile

Ask the Community Customization
1

Hello Elfsight team,

I’ve just installed the floating button widget on select pages on my website.

I’m wondering if there is a CSS or other solution to have the widget:

  1. Not flash red upon page load
  2. Have a white border around it’s outer edge consistent with my other “Free Quote” buttons
  3. Only show on mobile (desktop already has a persistent Free Quote button in the header)

The button is installed on this page, as well as other pages on my website: https://k9poopertroopers.com.au/

Thank you for your time and any help you provide.

Michael

2

Hi there, @Michael_Surnak :waving_hand:

Sure, I’ll be happy to help!

  1. To remove red flashes, please change the color from red to the current button color - #222d00.

  2. Here is a solution - Hide widget on desktop (floating layout)

  3. This CSS code will do the trick:

.es-button-base-container {
  box-shadow: none !important;
  border-color: white !important;
  border-width: 3px !important;
  border-bottom: none;
}

Give it a shot and let me know how it worked :wink:

3

Thank you Max! All three of those solutions worked perfectly and were super easy to implement.

4

It’s my pleasure!

In the meantime, we’d like to invite you to join our Giveaway, where you could win 4 FREE Months for your subscription.

Check the details and join in: May Giveaway: Celebrate Community Anniversary & Win 4 FREE MONTHS! :wrapped_gift: