Button Love #3

button-love-3.markdown

Button Love #3

The third installment to my famous Button Love series. Just hover your mouse to discover these beautifully themed buttons in action. Pure CSS(SCSS); absolutely no javascript.

A Pen by punit chawla on CodePen.

License.

index.html

<div class="button">
	<span>Button</span>
	
</div>
<div class="button2">
		<span>Button</span>
</div>
<div class="button3">
	<span><div>B</div><div>u</div><div>t</div><div>t</div><div>o</div><div>n</div></span>
</div>

style.scss

html{
	overflow-x:hidden;
	padding:0;
	margin:0;
	
}
body{
	padding: 0;
	margin:0;

}
.button{
	position: relative;
	top:0;
	left:0;
	width: 100%;
	height: 300px;
	white-space: nowrap;
	&:nth-child(1){
	background: url(https://images.unsplash.com/photo-1538834536097-211cbe65d1bf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=de95a7323777663c4e7bee805d9385e0&auto=format&fit=crop&w=1567&q=80) center center no-repeat;
		background-size: cover;
	}

	overflow: hidden;
	display: block;
	span{
		transition: all 0.6s ease;
		font-size: 62px;
		font-weight: 800;
		font-family: sans-serif;
		position: absolute;
		top: 38%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 6px;
		background: black;
color: white;
			mix-blend-mode:overlay;
		border-radius: 4px;
		cursor: pointer;
		&:hover{
	background: #fff;
			color: #000;
			padding: 100%;
		}
	}
	
	
}
.button2{
	position: relative;
	top:0;
	left:0;
	width: 100%;
	height: 300px;
	
	background: url(https://images.unsplash.com/photo-1538964173425-93884d739596?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e2f0390d79969aaf31e155bd1f7138b0&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb) center center no-repeat;
		background-size: cover;
	

	overflow: hidden;
	display: block;
	span{
		transition: all 0.6s ease;
		overflow: hidden;
		font-size: 62px;
		font-weight: 800;
		font-family: sans-serif;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0px;
		color: white;
		border-radius: 4px;
		cursor: pointer;
		
		&::after{
			content:'';
			display: block;
			position: absolute;
			bottom:-50px;
			left: -60px;
			width: 90px;
			height: 90px;
			background: #000;
			z-index: -1;
			box-shadow: 0px 0px 120px #024768, 0px 0px 120px #04B0BC, 0px 0px 120px #33C9C7, 0px 0px 120px #94DFDD,0px 0px 120px #97D3D3;
			transition: all 0.3s ease;
			transform: rotate(-45deg);
			
		}
		&:hover::after{
			box-shadow: 40px -20px 0px #024768,41px -20px 8px rgba(0,0,0,0.3), 80px 20px 0px #04B0BC,81px 20px 8px rgba(0,0,0,0.3), 120px 60px 0px #22CBCB,121px 60px 8px rgba(0,0,0,0.3), 160px 100px 0px #94DFDD,161px 100px 8px rgba(0,0,0,0.3),200px 120px 0px #97D3D3;
		}
		&:hover{
			box-shadow: 4px 34px 24px rgba(0,0,0,0.3);
		}
	}
	
	
	
}
.button3{
	position: relative;
	top:0;
	left:0;
	width: 100%;
	height: 300px;
	
	background: url(https://images.unsplash.com/photo-1534823983341-d4e6e4aa046c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=295c087fa2d537cab778f04c0c75cd3a&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb) center center no-repeat;
		background-size: cover;
	

	overflow: hidden;
	display: block;
	span{
				white-space: nowrap;
		div{
			display: inline-block;
			position:relative;
		}
		div:nth-child(1){
			transition: all 2s ease;
			&::after{
			transition: all 1s ease;
			content:'B';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color: #FD1FBD;
			z-index: -1;
		}
		
		&::before{
			transition: all 1.5s ease;
			content:'B';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color:#76EBF4;
			z-index: -2;
		}
	
		}
		div:nth-child(2){
			transition: all 2s ease;
			&::after{
			transition: all 1s ease;
			content:'u';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color: #FD1FBD;
			z-index: -1;
		}
		
		&::before{
			transition: all 1.5s ease;
			content:'u';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color:#76EBF4;
			z-index: -2;
		}
	
		}
		div:nth-child(3){
			transition: all 2s ease;
			&::after{
			transition: all 1s ease;
			content:'t';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color: #FD1FBD;
			z-index: -1;
		}
		
		&::before{
			transition: all 1.5s ease;
			content:'t';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color:#76EBF4;
			z-index: -2;
		}
	
		}
		div:nth-child(4){
			transition: all 2s ease;
			&::after{
			transition: all 1s ease;
			content:'t';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color: #FD1FBD;
			z-index: -1;
		}
		
		&::before{
			transition: all 1.5s ease;
			content:'t';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color:#76EBF4;
			z-index: -2;
		}
	
		}
		div:nth-child(5){
			transition: all 2s ease;
			&::after{
				
			transition: all 1s ease;
			content:'o';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color: #FD1FBD;
			z-index: -1;
		}
		
		&::before{
			transition: all 1.5s ease;
			content:'o';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color:#76EBF4;
			z-index: -2;
		}
	
		}
		div:nth-child(6){
			transition: all 2s ease;
			&::after{
			transition: all 1s ease;
			content:'n';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color: #FD1FBD;
			z-index: -1;
		}
		
		&::before{
			transition: all 1.5s ease;
			content:'n';
			position: absolute;
			left:0px;
			top:0px;
			transform: rotateX(0deg);
			color:#76EBF4;
			z-index: -2;
		}
	
		}
			&:hover div::after{
			transform: rotateX(-1080deg);
			opacity:1;
				transform: scale(1.2);
		}
		&:hover div::before{
			transform: rotateX(-1440deg);
			opacity:1;
			transform: scale(1.5);
		}
		&:hover div{
			transform:rotateX(-1800deg);
			margin-left: 8px;
		}
		transition: all 2s ease;
		overflow: hidden;
		font-size: 82px;
		font-weight: 800;
		font-family: sans-serif;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 20px;
		color: white;
		border-radius: 4px;
		cursor: pointer;
		text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
		
		
	}
	
	
	
}