.close-container
		span.cross-line.top-left
		span.cross-line.top-right
		span.cross-line.bottom-left
		span.cross-line.bottom-right
View Compiled
// Mixins to make code compatible with older browsers
@mixin rotate($degs){
    -webkit-transform: -webkit-rotate($degs);
    -webkit-transform: rotate($degs);
       -moz-transform: rotate($degs);
        -ms-transform: rotate($degs);
    	 -o-transform: rotate($degs);
    		transform: rotate($degs);
}
@mixin scale($X, $Y){
    -webkit-transform: scale($X, $Y);
       -moz-transform: scale($X, $Y);
        -ms-transform: scale($X, $Y);
    	 -o-transform: scale($X, $Y);
    		transform: scale($X, $Y);
}
@mixin translate($Xmove, $Ymove){
    -webkit-transform: translate($Xmove, $Ymove);
       -moz-transform: translate($Xmove, $Ymove);
        -ms-transform: translate($Xmove, $Ymove);
    	 -o-transform: translate($Xmove, $Ymove);
    		transform: translate($Xmove, $Ymove);
}
@mixin transitions-ease($timing){
	-webkit-transition: all $timing cubic-bezier(.3,0,.2,1);
	   -moz-transition: all $timing cubic-bezier(.3,0,.2,1);
	    -ms-transition: all $timing cubic-bezier(.3,0,.2,1);
	     -o-transition: all $timing cubic-bezier(.3,0,.2,1);
	        transition: all $timing cubic-bezier(.3,0,.2,1);
}

body{background-color: #2a155b;}

.close-container{
	// Container styling
	position: absolute;
	width: 500px; height: 500px; // Define button size
	margin: auto;
	top: 0; bottom: 0;
	left: 0; right: 0;
	cursor: pointer;
	
	// Minus bar when hover
	&:after{
		content: '';
		display: block;
		position: absolute;
		width: 70%;
		height: 2px;
		margin: auto;
		top: 0; bottom: 0;
		left: 0; right: 0;
		background-color: #fff;
		@include scale(0,1);
		@include transitions-ease(.25s);
	}

	// "X" bars, they are 4 to control each one in different directions
	.cross-line{
		position: absolute;
		width: 100%;
		height: 3px;
		border-radius: 6px;
		margin: auto;
		top: 0; bottom: 0;
		left: 0; right: 0;
		overflow: hidden;

		&.top-left{@include rotate(45deg);}
		&.top-right{@include rotate(135deg);}
		&.bottom-left{@include rotate(-45deg);}
		&.bottom-right{@include rotate(-135deg);}

		&:before{
			content: '';
			display: block;
			position: absolute;
			top: 0; left: 0;
			width: 50%;
			height: 100%;
			border-radius: 6px;
			background-color: #fff;
			@include transitions-ease(.4s);
		}
	}
	
	&:hover{
		&:after{
			@include transitions-ease(.4s);
			@include scale(1,1);
		}

		.cross-line{
			&:before{
				@include translate(-101%,0);
			}
		}
	}
}
View Compiled
// Not found

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.