JSFiddle - React, Tailwind, and code Playground

by burnso

HTML

<div class="linkbutton"></div>

SCSS

.linkbutton{
 	    position:absolute;
		z-index: 10;
		right: 50%;
		bottom:50%;
		width: 50px;
		height: 50px;
		background-color:#333;
    
        transition:ease all 350ms;

		&:after{
			content: '';
			display: block;
			position: absolute;
			width: 10px;
			height: 1px;
			top: 25px;
			left: 19px;
			background-color:#eee;
			transform:rotate(45deg);
			transform-origin:100% 100%;
            
            transition:ease all 350ms;

		}
		&:before{
			content: '';
			display: block;
			position: absolute;
			width: 10px;
			height: 1px;
			top: 24.5px;
			left: 20px;
			background-color:#eee;

			transform:rotate(-45deg);
			transform-origin:100% 100%;
            transition:ease all 350ms;
            
		}
	}

  	.linkbutton:hover{
		&:after{
			transform:rotate(20deg);
		}
		&:before{
			transform:rotate(-20deg);
		}
	}