fixed buttons' clickable area

index.html

@@ -29,7 +29,7 @@ <h1>This website is awesome</h1>
           <p>This website has some subtext that goes here under the main title. It's a smaller font and the color is
             lower
             contrast</p>
-          <button><a href="#">Sign up</a></button>
+          <button class="button-one"><a href="#">Sign up</a></button>
         </div>
         <div class="img">this is a placeholder for an image</div>
       </div>
@@ -76,7 +76,7 @@ <h2>Some random information.</h2>
             <p class="action">Call to action! It's time!</p>
             <p class="action-sub">Sign up for our product by clicking that button right over there!</p>
           </div>
-          <button><a href="#">Sign up</a></button>
+          <button class="button-two"><a href="#">Sign up</a></button>
         </div>
       </div>
 

styles.css

@@ -87,22 +87,17 @@ a {
     color: #E5E7EB;
 }
 
-button {
+.button-one {
     padding: 6px 0;
     border-radius: 4px;
     border: none;
     background-color: #3882F6;
     color: #E5E7EB;
     font-weight: bolder;
-    height: 28px;
-    width: 97px;
-    flex-shrink: 0;
 }
 
-button a {
-    height: 28px;
-    width: 97px;
-
+.button-one a {
+    padding: 6px 25px;
 }
 
 .img {
@@ -188,6 +183,16 @@ button a {
     color: #E5E7EB;
 }
 
-.modal button {
+.button-two {
+    background-color: #3882F6;
     border: 1px solid #E5E7EB;
-}
+    color: #E5E7EB;
+    padding: 6px 0;
+    border-radius: 4px;
+    font-weight: bolder;
+    flex-shrink: 0;
+}
+
+.button-two a {
+    padding: 6px 24px;
+}