<div class="card">
  <div class="card__title"></div>
  <div class="card__copy"></div>
  <div class="card__button"></div>
</div>

* {
  background: #000;
  font-family: "Manrope", sans-serif;
}
html,
body {
  height: 100%;
}
.card {
  width: 80%;
  height: 100%;
  border: 2px dashed rgb(29, 99, 92);
  margin: auto;
  position: relative;
}

.card__title {
  width: 80%;
  height: 20%;
  border: 2px dashed #8950ee;
  margin: 4rem auto;
  position: relative;
}

.card__copy {
  width: 80%;
  height: 20%;
  border: 2px dashed #8950ee;
  margin: 4rem auto;
  position: relative;
}

.card__button {
  width: 80%;
  height: 20%;
  border: 2px dashed #8950ee;
  margin: 4rem auto;
  position: relative;
}

.card::after {
  content: "card";
  color: white;
  background: #00b073;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5em 1em;
}

.card__title::after {
  content: "card__title";
  color: white;
  background: #8950ee;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5em 1em;
}

.card__copy::after {
  content: "card__copy";
  color: white;
  background: #8950ee;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5em 1em;
}

.card__button::after {
  content: "Card__button";
  color: white;
  background: #8950ee;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5em 1em;
}

.card:hover {
  border: 2px solid lightgreen;
  box-shadow: 0 0 0.25em rgb(20, 231, 198), inset 0 0 0.25em rgb(20, 231, 198);
}

.card__title:hover,
.card__copy:hover,
.card__button:hover {
  border: 2px solid #8950ee;
  box-shadow: 0 0 0.25em #8950ee, inset 0 0 0.25em #8950ee;
}