body{
	margin: 0;
	padding: 0;
	background-color: #fdfdfd;
	background: url(img/plush-design-studio-483666-unsplash.jpg)round;
}
.main-div h1{
    text-align: center;
    margin-top: 70px;
    font-family: sans-serif;
    font-size: 60px;
}
.but-on{
	position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%,-20%);
    width: 170px;
    height: 60px;
    cursor: pointer;
    font-size: 30px;
    background: none;
    color: black;
    border: 1px solid #338033;
    border-radius: 4px;
    transition: .6s;
}
button:focus{
    outline: none;
}
button:before{
	content: '';
	display: block;
	position: absolute;
	background: rgba(255,255,255,.5);
	width: 60px;
	height: 100%;
	left: 0;
	top: 0;
	opacity: .5s;
	filter: blur(30px);
	transform: translateX(-130px) skewX(-15deg);
}
button:after{
    content: '';
	display: block;
	position: absolute;
	background: rgba(255,255,255,.2);
	width: 30px;
	height: 100%;
	left: 30px;
	top: 0;
	opacity: 0;
	filter: blur(30px);
	transform: translate(-100px) scaleX(-15deg);
}
button:hover{
    background: #338033;   
}
button:hover:before{
	transform:translateX(300px) skewX(-15deg);
	opacity:.6s;
	transition:.7s;
}
button:hover:after{
	transform:translateX(300px) skewX(-15deg);
	opacity:1;
	transition:.7s;
}