JSFiddle - React, Tailwind, and code Playground
by Qwerty_Wasd
HTML
<div class="content-white">
<div class="early_access_header_w">
<div class="back_div"><a class="back_menu" href="game.html">Назад</a>
</div>
</div>
CSS
body {
margin: 0;
background: url(images/fon.jpg) no-repeat fixed;
background-size: cover;
font: normal 14px SegoePrint;
line-height: 18px;
color: #4530af;
}
.early_access_header_w {
background: white;
width: 720px;
padding: 20px 20px 20px;
}
.content-white {
background: white;
width: 760px;
margin: 0 auto;
padding: 20px 40px 20px;
text-align: justify;
top: 50%;
overflow: auto;
}
.back_div {
margin: 30px auto;
padding: 0;
text-align: center;
display: block;
}
.back_menu {
color: green;
border: 2px solid green;
text-decoration: none;
display: inline-block;
font-size: 18px;
width: 130px;
height: 40px;
line-height: 40px;
margin: 20px;
position: relative;
overflow: hidden;
transition: color .5s;
-webkit-box-shadow: 0 0 4px #999;
-moz-box-shadow: 0 0 4px #999;
-o-box-shadow: 0 0 4px #999;
box-shadow: 0 0 4px #999;
z-index: 0;
}
.back_menu:before {
background: green;
content: "";
position: absolute;
z-index: -1;
height: 150px;
width: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.back_menu:hover {
color: #ffffff;
}
.back_menu:before {
top: 100%;
left: 100%;
transition: all .7s;
}
.back_menu:hover:before {
top: -30px;
left: -30px;
}