How to create the button effect of bubble fill with pure CSS

Effect preview

Online demo

Press the "click preview" button on the right to preview on the current page, and click the link to preview in full screen.

https://codepen.io/comehope/pen/eKqZjy

Interactive video

This video is interactive. You can pause the video at any time and edit the code in the video.

Please use chrome, safari, edge to open and watch.

https://scrimba.com/p/pEgDAM/ceBEytp

Source code download

Please download all the source code of the daily front-end combat series from github:

https://github.com/comehope/front-end-daily-challenges

Code interpretation

Define dom, use < NAV >, < UL >, < li > to build navigation structure, each < li > contains four < span > bubbles

&lt;nav&gt; &lt;ul&gt; &lt;li&gt; home &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;

Center:

body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }

Set button style:

nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { --c: goldenrod; color: var(--c); font-size: 16px; border: 0.3em solid var(--c); border-radius: 0.5em; width: 12em; height: 3em; text-transform: uppercase; font-weight: bold; font-family: sans-serif; letter-spacing: 0.1em; text-align: center; line-height: 3em; }

Draw a bubble under the button:

nav ul li { position: relative; } nav ul li span { position: absolute; width: 25%; height: 100%; background-color: var(--c); transform: translateY(150%); border-radius: 50%; }

Place 4 bubbles side by side:

nav ul li span { left: calc((var(--n) - 1) * 25%); } nav ul li span:nth-child(1) { --n: 1; } nav ul li span:nth-child(2) { --n: 2; } nav ul li span:nth-child(3) { --n: 3; } nav ul li span:nth-child(4) { --n: 4; }

Increase the effect of four bubbles in turn when hovering over the button:

nav ul li span { transition: 0.5s; transition-delay: calc((var(--n) - 1) * 0.1s); } nav ul li:hover span { transform: translateY(0) scale(2); }

Hide the content outside the button to create an effect that only bubbles appear when hovering:

nav ul li { overflow: hidden; }

Put the bubble in the lower layer and the text in the upper layer:

nav ul li { z-index: 1; transition: 0.5s; } nav ul li span { z-index: -1; } nav ul li:hover { color: black; }

Add a few more buttons to the dom:

&lt;nav&gt; &lt;ul&gt; &lt;li&gt; home &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/li&gt; &lt;li&gt; products &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/li&gt; &lt;li&gt; services &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/li&gt; &lt;li&gt; contact &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;

Finally, leave a gap between the buttons:

nav ul li { margin: 1em; }

be accomplished!

Original address: https://segmentfault.com/a/1190000015560736

Add new comment

0 comments