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


Download locally

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

Tags: Front-end github

Posted on Wed, 04 Dec 2019 03:09:46 -0500 by timetomove