Button Nav "Type 2"

In this example below you will see how to do a Button Nav "Type 2" with some HTML / CSS and Javascript

Creating a simple "Button Nav" with "3D Flip" style by using CSS & JavaScript.

Thumbnail
This awesome code was written by Amli, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Amli ©
  • HTML
  • CSS
  • JavaScript
    <div class="toggle" id="Menu" onclick="Toggle_Menu()">
	<div class="container">
		<div class="div_1"></div>
		<div class="div_2"></div>
	</div>
</div>

/*Downloaded from https://www.codeseek.co/uzcho_/button-nav-andquottype-2andquot-xzGMaM */
    @charset "utf8";


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Root */
*,
*:after,
*:before,
html
	{box-sizing:border-box}

body
	{background:#fff;margin:0;padding:0}

.toggle,
[class*="div"]
	{display:block;position:absolute}

.container,
[class*="div"]
	{width:100%;height:100%}

.container:before,
[class*="div"]:before,
[class*="div"]:after{
	content:"";
	display:block;
	position:absolute;
	transition:all .2s ease
	}

[class*="div"]
	{background:radial-gradient(farthest-side at 10% 10%,#e6e6e6,#000,#000,#222);overflow:hidden;border-radius:50%}

[class*="div"]:hover:before,
[class*="div"]:hover:after
	{background:#a3a3a3}

[class*="div"]:before,
[class*="div"]:after
	{background:#fff}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Root */


/*                                           ! Button Nav "Type 2" Start Here ...
=======================================================================================================================*/
.toggle{
	width:50px;
	height:50px;
	top:50%;
	left:50%;
	cursor:pointer;
	perspective:100%;
	transform:translate(-50%,-50%)
	}

.flip3D .container
	{transform:rotateY(180deg);transition:all .2s ease}

.container{
	display:block;
	position:relative;
	transform-style:preserve-3d;
	transform:rotateY(0);
	transition:all .2s ease
	}

.container:before{
	background:#808080;
	width:100%;
	height:5px;
	bottom:-10px;
	border-radius:50%
	}

.div_1
	{transform:translate3d(0,0,25px)}

.div_1:before,
.div_1:after{
	width:25px;
	height:2px;
	left:50%;
	transform:translate(-50%,0)
	}

.div_1:before
	{top:20px}

.div_1:after	
	{bottom:20px}

.div_2
	{transform:rotateY(180deg) translate3d(0,0,25px)}

.div_2:before,
.div_2:after{
	width:2px;
	height:25px;
	top:50%;
	left:50%
	}

.div_2:before
	{transform:translate(-50%,-50%) rotate(45deg)}

.div_2:after
	{transform:translate(-50%,-50%) rotate(-45deg)}


/*Downloaded from https://www.codeseek.co/uzcho_/button-nav-andquottype-2andquot-xzGMaM */
    function Toggle_Menu(){
   if(document.getElementById("Menu")){
      document.getElementById("Menu").classList.toggle("flip3D")
   }
}

Comments