← All elements
<div class="si"><a data-c="#1877f2"><i>f</i><i>f</i></a><a data-c="#0a66c2"><i>in</i><i>in</i></a><a data-c="#e11d48"><i>yt</i><i>yt</i></a><a data-c="#111827"><i>X</i><i>X</i></a></div>About this button
Round social buttons where the letter slides out and a brand-coloured twin slides in on hover.
How it works
Each circle holds two layers: a grey letter and a brand-coloured twin pushed down. Hovering translates the first up and out and the second into view, with overflow hidden on the circle to create the slide-over effect. A custom property supplies each brand colour.
Ways to customise it
- Replace the letters with real icons.
- Change the --c values for your networks.
- Flip the translate direction to slide sideways.
Good to know
These are anchors, so give each a real href and accessible name. Brand colours and logos have usage rules, so check them before using real marks.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.