Action button with a badge (CSS only)

We wanted to have all pending settings shown on the action button, but since the action button will rotate when opening the menu we ended up with a problem. The badge would be rotated together with it. Instead of not liking this we kinda loved it and we created a little "jump back" effect to it. The value of the badge is set to a dataset attribute which is then connected to the :after element of the button.

A little side note: the badge will jump "2px" right compared to the default position (when the action menu is closed). Well we didn't want our badge to hit it's head in the + symbol :)

PS. the GIF doesn't do the effect justice...