<div class="btn-o" id="Button_Nav" onclick="Toggle_Menu()">
  <div class="o"></div>
  <div class="x"></div>
</div>


<a class="me" href="https://su7oy.com" target="_blank" style="color:#000;"></a>

:root {
  --tr3d: translate3d(0, 0, 25px);
  --tr: translate(-50%, -50%);
}

body {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  perspective: 100%;
}

.btn-o {
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  transform-style: preserve-3d;
}
.btn-o:before {
  background: #808080;
  width: 100%;
  height: 5px;
  bottom: -10px;
  display: block;
  position: absolute;
  content: "";
  border-radius: 50%;
}

.o, .x {
  background: radial-gradient(farthest-side at 10% 10%, #e6e6e6, #000, #000, #222);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  border-radius: 50%;
}
.o:before, .o:after, .x:before, .x:after {
  width: 25px;
  height: 2px;
  left: 50%;
  display: block;
  position: absolute;
  content: "";
}

.o {
  transform: var(--tr3d);
}
.o:before, .o:after {
  background: #fff;
  transform: translate(-50%, 0);
}
.o:before {
  top: 20px;
}
.o:after {
  bottom: 20px;
}

.x {
  transform: rotateY(180deg) var(--tr3d);
}
.x:before, .x:after {
  background: #ff1a1a;
  top: 50%;
}
.x:before {
  transform: var(--tr) rotate(45deg);
}
.x:after {
  transform: var(--tr) rotate(-45deg);
}

.btn-x {
  transform: rotateY(180deg);
}

@charset UTF-8;

*{
  font-style: normal
}

*, *:after, *:before, html{
	box-sizing: border-box
}
    
[tabindex], :focus, a, button, input, textarea{
	outline: none;
  outline-width: none
}

body, html{
  width: 100%;
  height: 100%
}

body, h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0
}

a{
  text-decoration: none
}

button{
  cursor: pointer
}

.me{
	background: url("https://s.cdpn.io/profiles/user/3581511/512.jpg?1568313826")no-repeat center / contain;
	width: 40px;
	height: 40px;
	bottom: 16px;
	right: 16px;
	display: block;
	position: fixed;
	z-index: 9999;
	border-radius: 50%;
	animation: me 2s linear infinite alternate
}

@keyframes me{
	from{
		transform: translateY(-4px)
	}

	to{
		transform: translateY(4px)
	}
}

.me:before{
  content: "Click Me";
	width: 150px;
	top: 10px;
	right: 0;
  color: green;
	display: block;
	position: absolute;
  font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	opacity: 0;
	z-index: -1;
	visibility: hidden;
	transition: all .5s ease
}

.me:hover:before{
	right: 50px;
	opacity: 1;
	visibility: visible
}

function Toggle_Menu(){
   document.getElementById("Button_Nav").classList.toggle("btn-x")
}