Social Media UI button | CSS Tutorial

CSS Animation 1

HTML Code

Add a icon, title, description and Read more Button inside card container.

Below is HTML file Code.

<div class="card-container">
	<div class="card-box">
		<div class="icon">
			<svg class="svg-icon" viewBox="0 0 20 20">
					<path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z"></path>
				</svg>	
		</div>
		<div class="heading">
			Neumorphic Card Design	
		</div>
		<p class="detail">
			Neumorphic UI elements look like they are connected to background,as if the elements are extruded from the background or inset into the background. 	
		</p>
		<button type="button" class="btn">Read More</button>	
	</div>	
</div> 

CSS Code

Below is CSS file Code. 

.card-container {
	box-shadow: 4px 4px 4px 0 #d1d9e6 inset,
				-4px -4px 4px 0 #fff inset;
	height: 550px;
	width: 400px;
	border-radius: 25px;
	margin: 50px auto;
	padding: 20px;
	transition: all 0.4s ease-in-out;
}
.card-container:hover {
	padding: 0;
	border-radius: 100px;
	transition: all 0.4s ease-in-out;
}
.card-box {
	height: 100%;
	box-shadow: 4px 4px 4px 0 #d1d9e6,
				-4px -4px 4px 0 #fff;
	padding: 20px;
	border-radius: 50px;
	transition: all 0.4s ease-in-out;
}
.card-container:hover .card-box {
	padding: 40px;
}
.icon svg {
	height: 100px;
	width: 100px;
	fill: #d1d9e6;
	margin: 0 auto;
	display: block;
}
.icon {
	box-shadow: inset -2px -2px 5px #fff,
				inset 3px 3px 5px rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	height: 150px;
	width: 150px;
	padding: 25px;
	margin: 0 auto;
	transition: box-shadow 0.4s ease-in-out;
} 
.card-container:hover .icon {
	box-shadow: -2px 2px 5px #fff,
				3px 3px 5px rgba(0,0,0,0.1);
	transition: box-shadow 0.4s ease-in-out;
}
.heading {
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
	padding: 20px 25px;
	color: #296894;
}
.detail {
	text-align: center;
	font-size: 16px;
	color: #635f82;
	padding: 20px 25px;
}
.btn {
	margin: 0 auto;
	display: block;
	width: 150px;
	height: 50px;
	border:none;
	box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
				6px 6px 10px rgba(0, 0, 0, 0.2);
	margin-top: 50px;
	border-radius: 50px;
	cursor: pointer;
	color: #aaa;
	transition: all 0.4s ease-in-out;
}
.btn:hover {
	color: #296894;
	letter-spacing: 2px;
	transition: all 0.4s ease-in-out;
}
.btn:active,
.btn:focus {
	outline: 0;
	border: none;
} 

Watch Below Video for Detail Understanding

Leave a Reply

Your email address will not be published. Required fields are marked *