30 Days of CSS Girls- 4: Heart Button

30-days-of-css-girls-4-heart-button.markdown

30 Days of CSS Girls- 4: Heart Button

A Pen by Jasterix on CodePen.

License.

index.html

<h1>30 Days of CSS Girls:</h1>
<h2><a href="https://css.codinggirls.sg/day-5-6--heart-button/">Heart Button</a></h2>

<div class="heart__wrapper">
  <div tabindex="4" class="heart"></div>
</div>

<footer>
  Resources:
  <ul>
    <li><a href="https://css-tricks.com/almanac/selectors/f/focus/">CSS Tricks :focus</li>
  <li><a href="https://usefulangle.com/post/128/css-focus-within#:~:text=The%20%3Afocus%2Dwithin%20pseudo%2D,focus%20selector%20in%20this%20case.">CSS :focus-within</a></li>
    
  </ul>
</footer>

style.css

.heart__wrapper {
  background-color: lightgrey;
  position: relative;
  height: 12rem;
  width: 12rem;
  border-radius: 10%;
  margin: 5% auto;
  box-shadow: 0px 20px 0px darkgrey;
}

.heart__wrapper:focus-within {
  background-color: hotpink;
  position: relative;
  height: 12rem;
  width: 12rem;
  border-radius: 10%;
  margin: 6% auto;
  box-shadow: 0px 10px 0px black;
  outline: none;
  cursor: select;
}

.heart {
  top: 40%;
  width: 30%;
  height: 30%;
  background: grey;
  transform: rotate(45deg);
  position: relative;
  margin: auto;

}

.heart::before, .heart::after {
  z-index: -1;
  content: "";
  background-color: grey;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
}

.heart::before {
  top: -50%;
}

.heart::after {
  left: -50%;
}

.heart:hover, .heart:hover::before, .heart:hover::after {
  background: hotpink;
}


.heart:focus, .heart:focus::before, .heart:focus::after {
  background: white;
  outline: none;
}



/* .heart {
    animation: beat 1s infinite;
} */

@keyframes beat{
  30% {
    transform: rotate(45deg) scale(1.1);
  }
}