JSFiddle - React, Tailwind, and code Playground

by Bizon4ik

HTML

<div id="marginfirstscreen">	
				<div class="mainbutton" >
					<h4 id="buttom-purchase">КУПИТЬ</h4>
					<svg width="200" height="70">
						<line class="top-line"    x1="0" y1="0" x2="600" y2="0" />
						<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
						<line class="left-line"   x1="0" y1="70" x2="0" y2="-400" />
						<line class="right-line"  x1="200" y1="0" x2="200" y2="470" />
					</svg>
				<div id="buttom-purchase-info" >
				</div>		
				</div>	
                
                <div class="mainbutton" >
					<h4 >Продать</h4>
					<svg width="200" height="70">
						<line class="top-line"    x1="0" y1="0" x2="600" y2="0" />
						<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
						<line class="left-line"   x1="0" y1="70" x2="0" y2="-400" />
						<line class="right-line"  x1="200" y1="0" x2="200" y2="470" />
					</svg>

				</div>	
					
			</div>
            <div id="secondscrean">
                Second
</div>

CSS

body, html {
    background:#ddd;
}

#marginfirstscreen {
	width:100%;
	height:100%;
	position:relative;
	z-index:1;	
}

#marginfirstscreen .mainbutton {
	margin:50px 0 50px 150px;
	display:inline-block;
	width: 200px;
	height: 70px;
	position: relative;
	z-index:5;
    float:left;
}
#marginfirstscreen .mainbutton h4 {
	display:inline-block;
	position:relative;
	z-index:10;
	color:#000;
	text-align:center;
	width:100%;
	height:100%;
	margin:0;
    padding:0;
    line-height:70px;
	font-size:2em;
	font-family:sans-serif;
	
}
#marginfirstscreen .mainbutton svg {
    position: absolute;
    top: 0;
    left: 0;
	z-index:0;
	
}
#marginfirstscreen .mainbutton svg line {
    stroke-width: 2;
    stroke: #fff;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: transform .6s ease-out;
}


#marginfirstscreen .mainbutton:hover svg line.top-line {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}
#marginfirstscreen .mainbutton:hover svg line.bottom-line {
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
#marginfirstscreen .mainbutton:hover svg line.left-line {
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
}
#marginfirstscreen .mainbutton:hover svg line.right-line {
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
}

#buttom-purchase-info {
	position:absolute;
	margin-top:-70px;
	width:400px;
	height:400px;
	border:1px solid red;
	z-index:9;
	display:none;
	background:#fff;
}
#secondscrean {
    height:100px;
}

JavaScript

$("#buttom-purchase").click(function (event) {

        $("#buttom-purchase-info").show();

        event.stopPropagation()

    });


  $(document).on("click", function (event) {
        if($(event.target).is("#buttom-purchase-info")) event.stopPropagation();
        else if ($(event.target).parents("#buttom-purchase-info").length === 0) $("#buttom-purchase-info").hide();

    });