<!DOCTYPE html>
<html>
<head>
	<title>CSS Neumorphism Card UI Hover Effects | CSS3 Responsive Design</title>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

	

	<div class="container">
		<div class="Box">
			<div>
				<i class="fas fa-pencil-ruler"></i>
				<h2>Design</h2>
				<p>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry.
				</p>
				<a href="#">Learn More</a>
			</div>
		</div>
		<div class="Box">
			<div>
				<i class="fas fa-users"></i>
				<h2>Team</h2>
				<p>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry.
				</p>
				<a href="#">Learn More</a>
			</div>
		</div>
		<div class="Box">
			<div>
				<i class="fas fa-laptop-code"></i>
				<h2>Code</h2>
				<p>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry.
				</p>
				<a href="#">Learn More</a>
			</div>
		</div>
	</div>	





</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
}
body{
	background-color:#0abde3;
	width:100%;
	min-height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}
.container{
	position:relative;
	width:962px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
.Box{
	width:280px;
	min-height:400px;
	border-radius:20px;
	background:#0abde3;
	box-shadow: -13px -13px 26px #089bba, 
             	13px 13px 26px #0cdfff;
    display:table;
    margin:20px;
    cursor:pointer;
    transition:1s;
}
.Box:hover{
	background:linear-gradient(315deg, #09aacc, #0bcaf3);
	box-shadow: inset -30px -10px 10px #0ab4d8, 
            	inset 30px 10px 10px #0bc6ee;

}
.Box div{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	color:#222;
	padding:30px;
	color:#1e5b8b;
}
.Box div h2{
	margin-top:30px;
}
.Box div a{
	display:inline-block;
	margin-top:20px;
	width:120px;
	height:45px;
	background:linear-gradient(315deg, #0bcaf3, #09aacc);
	box-shadow: -13px -13px 26px #089bba, 
             	13px 13px 26px #0cdfff;
	text-align:center;
	line-height:45px;
	text-decoration:none;
	color:#fff;
	border-radius:20px;
	transition:1s;
}
.Box a:hover{
	box-shadow: inset -13px -13px 26px #089bba, 
             	inset 13px 13px 26px #0cdfff;
}
.Box div i{
	font-size:100px;
	color:#113f64;
}

@media (max-width:300px){
	.container .Box{
		width:100%;
		margin:20px 5px 20px 5px;
	}
	.container .Box div{
		padding:5px;
	}
	.Box div h2{
		margin-top:10px;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.