1 
 2<div class="card">
 3  <span class="card__title">Newsletter</span>
 4  <p class="card__content">
 5    Get existential crisis delivered straight to your inbox every week.
 6  </p>
 7  <form class="card__form">
 8    <input required="" type="email" placeholder="Your life" />
 9    <button class="card__button">Click me</button>
10  </form>
11</div>          

  1 
  2.card {
  3  width: 300px;
  4  padding: 20px;
  5  background: #fff;
  6  border: 6px solid #000;
  7  box-shadow: 12px 12px 0 #000;
  8  transition: transform 0.3s, box-shadow 0.3s;
  9}
 10 
 11.card:hover {
 12  transform: translate(-5px, -5px);
 13  box-shadow: 17px 17px 0 #000;
 14}
 15 
 16.card__title {
 17  font-size: 32px;
 18  font-weight: 900;
 19  color: #000;
 20  text-transform: uppercase;
 21  margin-bottom: 15px;
 22  display: block;
 23  position: relative;
 24  overflow: hidden;
 25}
 26 
 27.card__title::after {
 28  content: "";
 29  position: absolute;
 30  bottom: 0;
 31  left: 0;
 32  width: 90%;
 33  height: 3px;
 34  background-color: #000;
 35  transform: translateX(-100%);
 36  transition: transform 0.3s;
 37}
 38 
 39.card:hover .card__title::after {
 40  transform: translateX(0);
 41}
 42 
 43.card__content {
 44  font-size: 16px;
 45  line-height: 1.4;
 46  color: #000;
 47  margin-bottom: 20px;
 48}
 49 
 50.card__form {
 51  display: flex;
 52  flex-direction: column;
 53  gap: 15px;
 54}
 55 
 56.card__form input {
 57  padding: 10px;
 58  border: 3px solid #000;
 59  font-size: 16px;
 60  font-family: inherit;
 61  transition: transform 0.3s;
 62  width: calc(100% - 26px); /* Adjust for padding and border */
 63}
 64 
 65.card__form input:focus {
 66  outline: none;
 67  transform: scale(1.05);
 68  background-color: #000;
 69  color: #ffffff;
 70}
 71 
 72.card__button {
 73  border: 3px solid #000;
 74  background: #000;
 75  color: #fff;
 76  padding: 10px;
 77  font-size: 18px;
 78  left: 20%;
 79  font-weight: bold;
 80  text-transform: uppercase;
 81  cursor: pointer;
 82  position: relative;
 83  overflow: hidden;
 84  transition: transform 0.3s;
 85  width: 50%;
 86  height: 100%;
 87}
 88 
 89.card__button::before {
 90  content: "Sure?";
 91  position: absolute;
 92  top: 0;
 93  left: 0;
 94  width: 100%;
 95  height: 105%;
 96  background-color: #5ad641;
 97  color: #000;
 98  display: flex;
 99  align-items: center;
100  justify-content: center;
101  transform: translateY(100%);
102  transition: transform 0.3s;
103}
104 
105.card__button:hover::before {
106  transform: translateY(0);
107}
108 
109.card__button:active {
110  transform: scale(0.95);
111}
112 
113@keyframes glitch {
114  0% {
115    transform: translate(2px, 2px);
116  }
117  25% {
118    transform: translate(-2px, -2px);
119  }
120  50% {
121    transform: translate(-2px, 2px);
122  }
123  75% {
124    transform: translate(2px, -2px);
125  }
126  100% {
127    transform: translate(2px, 2px);
128  }
129}
130 
131.glitch {
132  animation: glitch 0.3s infinite;
133}