How to change the background color of the buttons in the horizontal floating bar

Hello,

To change the background color of icons only in the horizontal floating bar and the universal menus, you can use the following Additional CSS code:

/* AddToAny universal menu icons */
.a2a_full_services .a2a_svg, .a2a_mini_services .a2a_svg, .a2a_more .a2a_svg,
/* AddToAny floating icons */
.a2a_floating_style.a2a_default_style .a2a_svg {
  background-color: #0166ff !important;
}

I see what you mean now. The challenge is that the universal menu is actually the same menu for all universal buttons, just repositioned.

You can change the menu’s icon color on fly using the Additional JavaScript below:

// Change the AddToAny menu icon color on the fly for the horizontal floating bar only.
function changeAddToAnyVerticalHorizontalMenuIconColor() {
	// Set icon color.
	var color = '#0166ff';

	// Init <style> element.
	var ruleIndex = null;
	var style = document.createElement('style');
	document.head.appendChild(style);

	// Listen for the horizontal floating bar's mouseenter event.
	var verticalBar = document.querySelector('.a2a_floating_style.a2a_default_style');
	if ( ! verticalBar) return;
	verticalBar.addEventListener('mouseenter', function () {
		// Add a CSS rule if not already set.
		if (ruleIndex !== null) return;
		var a2aMenuIconSelectors = '.a2a_full_footer .a2a_svg,'
			+ '.a2a_full_services .a2a_svg,'
			+ '.a2a_mini_services .a2a_svg,'
			+ '.a2a_more .a2a_svg';
		var cssRule = a2aMenuIconSelectors + '{ background-color: ' + color + ' !important; }';
		ruleIndex = style.sheet.insertRule(cssRule);
	});

	// Listen for all other AddToAny button instances' mouseenter event.
	document.querySelectorAll('.a2a_kit:not(.a2a_floating_style.a2a_default_style)').forEach(function (el) {
		el.addEventListener('mouseenter', function () {
			// Delete the CSS rule if set.
			if (ruleIndex !== null) {
				style.sheet.deleteRule(ruleIndex);
				ruleIndex = null;
			}
		});
	});
};

// Set function to run when the DOM is loaded and parsed.
window.addEventListener('DOMContentLoaded', function (event) {
	changeAddToAnyVerticalHorizontalMenuIconColor();
});