<!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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.