CSS Card Gradient Hover Effect

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

 .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; }