DEV Community

Cover image for CSS Card Gradient Hover Effect
Jon Snow
Jon Snow

Posted on

CSS Card Gradient Hover Effect

CSS Card Gradient Hover Effect

CSS Card Gradient Hover Effect

HTML Code



<div class="card">
  <div class="content">
    <p class="heading">Card Hover Effect
    </p><p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi
      laboriosam at voluptas minus culpa deserunt delectus sapiente
      inventore pariatur
    </p>
    <button class="btn">Read more</button>
  </div>
</div>


Enter fullscreen mode Exit fullscreen mode

CSS Code



.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 320px;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  padding: 32px;
  overflow: hidden;
  border-radius: 10px;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}


/* Visit https://democoding.in/ for more free css animation */

.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 20px;
  color: #e8e8e8;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.content .heading {
  font-weight: 700;
  font-size: 32px;
}

.content .para {
  line-height: 1.5;
}

.content .btn {
  color: #e8e8e8;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  z-index: -1;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover::before {
  height: 100%;
}

.card:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.card:hover .btn {
  color: #212121;
  background: #e8e8e8;
}

.content .btn:hover {
  outline: 2px solid #e8e8e8;
  background: transparent;
  color: #e8e8e8;
}

.content .btn:active {
  -webkit-box-shadow: none;
          box-shadow: none;
}



Enter fullscreen mode Exit fullscreen mode

Check Our Latest Post


Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : Demo code


Top comments (0)