Forem

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

Posted on

4 1 1 1 2

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


Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)