A Pen by Halil İbrahim Nuroğlu

Thumbnail
This awesome code was written by haibnu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright haibnu ©
  • HTML
  • CSS
  • JavaScript
    <a class="box">
	<div class="content">
		<h5>başlık</h5>
		<p>açıklama</p>
		<div>read</div>
	</div>
</a>

/*Downloaded from https://www.codeseek.co/haibnu/a-pen-by-halil-andx130brahim-nuroandx11flu-Ewvpep */
    $anime-speed: 250ms;

body {
	background-color: #ededed;
}

.box {
	display: block;
	position: fixed;
	z-index:1;
	right: 32px;
	bottom: 32px;
	
	width: 328px;
	background: #FFFFFF;
	box-shadow: 0 4px 12px 0 rgba(0,0,0,0.10);
	border-radius: 4px;
	transition: all $anime-speed;
	
	.content {
		padding: 32px 24px;
		transition: all $anime-speed linear 250ms;
	}
	
	&.active {
		bottom: -30px;
		right: -30px;
		width: 48px;
		height: 48px;
		border-radius: 24px;
		//animation: mymove 2s 1;
		
		.content {
			opacity: 0;
			width: 0;
			height: 0;
			transition: all 0s linear 0s;
		}
	}
}

@keyframes mymove {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(30);
	}
}


/*Downloaded from https://www.codeseek.co/haibnu/a-pen-by-halil-andx130brahim-nuroandx11flu-Ewvpep */
    $(".box").click(function(e){
	$(this).toggleClass("active");
});

Comments