<!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.