Added the active and hover button states for the check button

[shreyas61]

Summary

Closes #

Test Plan

[netlify]

✅ Deploy Preview for pen-pals ready!

Name	Link
🔨 Latest commit	0b448a5
🔍 Latest deploy log	https://app.netlify.com/sites/pen-pals/deploys/671b065ff390640008b62d95
😎 Deploy Preview	https://deploy-preview-122--pen-pals.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SanjnaT41756]

Hi Shreya, great work so far! 😄

However, I have a couple of suggestions for improvement before merging these changes. If you hover and click on the "check" button, you can see the rest of the contents on the page shift for a moment, and we want to avoid this from happening.

To avoid this, I would like to suggest that you use the box-shadow property within the button's hover state. Similarly, look into the transform: scale property for the active state.

Additionally, in css/scss, if you are adding a variant/state (idk what its called lol) to an existing class object, then you do not need to copy over repeated properties.

For example, if you have:

#a-button {
  @include font-styles();
  background-color: colors.$primary-green;
  border: hidden;
  border-radius: 10px;
  color: colors.$text-white;
  padding: 1.25vw 2.5vw;
}

Then, you only need to add new properties into the hover state, rather than the same properties!

This is okay but its repitative

#a-button:hover {
  @include font-styles();
  background-color: colors.$primary-green;
  border: hidden;
  border-radius: 10px;
  color: colors.$text-white;
  padding: 1.25vw 2.5vw;

  box-shadow: 0 0 0rem black;
}

This is better! The properties of a-button are going to still apply!

#a-button:hover {
  **box-shadow: 0 0 0rem black;**
}

Let me know if you have any questions! 🌸

[SanjnaT41756]

Looks great!