Pure CSS3 Implementation of Ghost button navigation

Before you introduced a few navigation menus, and today to bring you a CSS3 implementation of the Ghost button-style navigation menu. The navigation interface is very nice. On the right is an animated message icon implemented by the CSS3. As follows:

Online preview Source Download

Implementation code:

HTML code:

  <Header>        <nav>            <a>Home</a> <a>Words</a> <a>Activity</a> <a>Discussion</a> <a>Immersion</a>        </nav>        <Buttonclass= "Notif">            <spanclass= "icon"></span>        </Button>    </Header>

CSS3 Code:

  * {margin:0;padding:0;}Body{background:#e9e9e9;Overflow:Hidden;}Header{Display:-webkit-box;Display:-webkit-flex;Display:-ms-flexbox;Display:Flex;-webkit-box-align:Center;-webkit-align-items:Center;-ms-flex-align:Center;Align-items:Center;Background-color:#1CAFF6;Background-color:Rgba (166, 231, 0.8);Background-image:-webkit-gradient (linear, left top, left bottom, from (#20A8E9), to (RGBA (+ 158, 0.5) );Background-image:-webkit-linear-gradient (Top, #20A8E9, Rgba (158, 0.5));Background-image:linear-gradient (to bottom, #20A8E9, RGBA (158, 0.5));padding:0 50px;}Main{background: White;Height:100VH;Border-radius:10px;margin:30px 55px;background:0 0 25px rgba (0, 0, 0, 0.04);}nav{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;Flex:1;Font:15px/20px "museo-sans-rounded", Sans-serif;-webkit-user-select:None;-moz-user-select:None;-ms-user-select:None;User-select:None;Overflow:Hidden;padding:17px 0;}a{Display:Inline-block;padding:10px 18px 8px;margin:0 2px;Border-radius:100px;Color: White;cursor:Pointer;-webkit-animation:nav-in 0.35s Cubic-bezier (0.2, 0.7, 0.2, 1.1) backwards;Animation:nav-in 0.35s Cubic-bezier (0.2, 0.7, 0.2, 1.1) backwards;-webkit-transition:background 0.35s;transition:background 0.35s;}a:hover{background:#1493D1;-webkit-transition:0;transition:0;}a:active{background:#107aad;}a:nth-child (1){-webkit-animation-delay:0.46667s;Animation-delay:0.46667s;}A:nth-child (2){-webkit-animation-delay:0.58333s;Animation-delay:0.58333s;}A:nth-child (3){-webkit-animation-delay:0.7s;Animation-delay:0.7s;}A:nth-child (4){-webkit-animation-delay:0.81667s;Animation-delay:0.81667s;}A:nth-child (5){-webkit-animation-delay:0.93333s;Animation-delay:0.93333s;}@-webkit-keyframes nav-in{From {-webkit-transform:Translate3d (0px, 100px, 0);Transform:Translate3d (0px, 100px, 0); }} @keyframes nav-in{From {-webkit-transform:Translate3d (0px, 100px, 0);Transform:Translate3d (0px, 100px, 0); }}.notif{Display:Inline-block;Border-radius:50%;background:#1392D0;padding:7px 9px;width:40px;Height:40px;Border:0;cursor:Pointer;-webkit-transition:0.35s;transition:0.35s;}. Notif:hover{background:#0e6d9c;-webkit-transition-duration:0.0875s;transition-duration:0.0875s;-webkit-transform:Scale (1.1);-ms-transform:Scale (1.1);Transform:Scale (1.1);}. notif:active,. Notif:focus{-webkit-transition-duration:0;transition-duration:0;-webkit-transform:Scale (1.15);-ms-transform:Scale (1.15);Transform:Scale (1.15);background:#0b577c;Outline:0;}. Notif. Icon{Display:Inline-block;width:22px;Height:26px;Background-image:URL ("Icon.png");-webkit-animation:notif 2s cubic-bezier (0.17, 0.67, 0.4, 1.17) infinite;Animation:notif 2s cubic-bezier (0.17, 0.67, 0.4, 1.17) infinite;-webkit-background-size:1000px 1000px;background-size:1000px 1000px;background-position:-340px-40px;}@-webkit-keyframes Notif{10%, 30% {-webkit-transform:Rotate ( -25deg);Transform:Rotate ( -25deg); }20%, 40%{-webkit-transform:Rotate (25deg);Transform:Rotate (25deg); }50%, 100%{-webkit-transform:None;Transform:None; }} @keyframes Notif{10%, 30% {-webkit-transform:Rotate ( -25deg);Transform:Rotate ( -25deg); }20%, 40%{-webkit-transform:Rotate (25deg);Transform:Rotate (25deg); }50%, 100%{-webkit-transform:None;Transform:None; }}

Pure CSS3 Implementation of Ghost button navigation