Merge pull request TheOdinProject#311 from bzaman/TheOdinProject#310-button-element-enhancement

TheOdinProject#310 button element enhancement

Author: codyloyd

flex/05-flex-modal/index.html

@@ -11,7 +11,7 @@
     <div class="modal">
       <div class="icon">!</div>
       <div class="header">Are you sure you want to do that?</div>
-      <div class="close-button">✖</div>
+      <button class="close-button">✖</button>
       <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
       <button class="continue">Continue</button>
       <button class="cancel">Cancel</button>

flex/05-flex-modal/solution/solution.css

@@ -46,9 +46,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid #eee;
+  padding: 0;
 }
 
 button {
+  cursor: pointer;
   padding: 8px 16px;
   border-radius: 8px;
 }

flex/05-flex-modal/solution/solution.html

@@ -12,7 +12,7 @@
       <div class="icon">!</div>
       <div class="container">
         <div class="header">Are you sure you want to do that?
-          <div class="close-button">✖</div>
+          <button class="close-button">✖</button>
         </div>
         <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
         <button class="continue">Continue</button>

flex/05-flex-modal/style.css

@@ -46,9 +46,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid #eee;
+  padding: 0;
 }
 
 button {
+  cursor: pointer;
   padding: 8px 16px;
   border-radius: 8px;
 }