Hover Issue

Thanks for the message.

That particular style of button works best in larger areas. You could add the following CSS to your theme (or in Appearance > Customize > Additional CSS) to decrease the width of the label, but then “Facebook” will get cut off:

.shared-counts-wrap.style-fancy .shared-counts-button:hover .shared-counts-label { width: 40px; }

I recommend using one of the other styles in that area.

Thanks for pointing me in the right direction Bill.

So for anyone else out there trying to mimic Social Warfare look (that’s what my client was after) this is the CSS I added to fix the issue I was having.

.shared-counts-wrap.style-fancy .shared-counts-button:hover {
	flex-basis: 25% !important;
}

.shared-counts-wrap.style-fancy .shared-counts-button {
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

Thanks! I just created an issue for this on GitHub so we can do some more testing, and maybe push that change out with the next update.

I don’t use that style often so I’m not familiar with its constraints. If changing flex-basis to 25% works well here, it might be better than the 10% we’re using now in core.