JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bubble Navigation</title>
    </head>
    
    <body>
        <div class="cf">
            <div class="ball khaki"><a href="#">home</a></div>
            <div class="ball tomato"><a href="#">leistungen</a></div>
            <div class="ball lightgreen"><a href="#">referenzen</a></div>
            <div class="ball lightblue"><a href="#">kontakt</a></div>
            
            <div class="border"></div>
        </div>
    </body>
</html>

CSS

@charset "UTF-8";

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
    font: inherit ;
}

html, body {
    width: 100% ;
    height: 100% ;
    font-family: "Agency FB", serif ;
}

/* clearfix */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }

body > div {
    padding: 20px ;
    font-size: 1.3em ;
}

.ball {
    opacity: .5 ;
    float: left ;
    width: 0 ;
    height: 0 ;
    border: 70px solid #e6e6e6 ;
    border-radius: 70px ;

    /* not officially supported yet */
    /*-moz-transition: margin-top .2s, height .3s, border-color .5s ;
    -webkit-transition: margin-top .2s, background-color .5s ;
    -o-transition: margin-top .2s, background-color .5s ;
    transition: margin-top .2s, height .3s, border-color .5s ;*/
    -moz-transition: margin-top .3s, border-color .5s, height .3s ;
}

.ball:not(:first-child) {
    margin-left: -30px ;
}

.ball:hover {
    position: relative ;
    z-index: 3 ;
    margin-top: -10px ;
    height: 65px ;
    border-bottom-left-radius: 0 ;
    border-bottom-right-radius: 0 ;
    cursor: pointer ;
}

.ball:active,
.ball:focus {
    opacity: 0.8 !important ;
}

.ball a {
    display: block ;
    margin-left: -60px ;
    width: 120px ;
    text-align: center ;
    text-decoration: none ;
    color: black ;
    background-color: inherit ;
}

.khaki:hover, .khaki:hover ~ .border { border-color: khaki ; }

.tomato:hover, .tomato:hover ~ .border { border-color: tomato ; }

.lightgreen:hover, .lightgreen:hover ~ .border { border-color: lightgreen ; }

.lightblue:hover, .lightblue:hover ~ .border { border-color: lightblue ; }

.border {
    opacity: .5 ;
    margin-top: 145px ;
    height: 0 ;
    border-bottom: 30px solid #e6e6e6 ;
}