Creating a Heart using CSS

Heart’s day is coming, so it’s time to make a heart using CSS.

Here are the codes for the CSS heart.

Code:

.heart { 
  background-color: red; 
  height: 50px; 
  width: 50px; 
  display: inline-block; 
  transform: rotate(-45deg); 
  position: relative; 
  margin: 20px; 
}
.heart:before,
.heart:after { 
  width: 50px; 
  height: 50px; 
  border-radius: 50%; 
  content: ""; 
  display: block; 
  position: absolute; 
  background-color: red; 
}
.heart:before { 
  left: 50%; 
  top: 0; 
}
.heart:after { 
  left: 0%; 
  top: -50%; 
}

HTML

<div class="heart"></div>

Throbbing Heart

Added CSS animation to make a throbbing heart.

CSS:

@keyframes pulse {
  from { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(0.85); }
  to { transform: rotate(-45deg) scale(1); }
}
.heart-pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform: rotate(90deg) !important;
}

HTML:

<div class="heart heart-pulse"></div>

Throbbing Heart on Hover

If you want it to throb on hover, here are the additional codes.

CSS:

@keyframes pulse {
  from { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(0.85); }
  to { transform: rotate(-45deg) scale(1); }
}
.heart-pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform: rotate(90deg) !important;
}
.heart-hover:hover {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

HTML

<div class="heart heart-hover"></div>

That’s it!

Happy

‘s Day Y’All!