booking section finished

Natours/starter/sass/components/_button.scss

@@ -1,87 +1,92 @@
 .btn {
-    &:link,
-    &:visited {
-        text-transform: uppercase;
-        text-decoration: none;
-        padding: 1.5rem 4rem;
-        display: inline-block;
-        border-radius: 10rem;
-        transition: all 0.2s;
-        position: relative;
-        font-size: $default-font-size; 
-    }
+  &,
+  &:link,
+  &:visited {
+    text-transform: uppercase;
+    text-decoration: none;
+    padding: 1.5rem 4rem;
+    display: inline-block;
+    border-radius: 10rem;
+    transition: all 0.2s;
+    position: relative;
+    font-size: $default-font-size;
 
-    &--animated {
-        animation: slideBottom 0.7s ease-out .75s;
-        animation-fill-mode: backwards;
-    }
+    // Changes to allow usage this class in <button>
+    border: none;
+    cursor: pointer;
+  }
 
-    &:hover {
-        transform: translateY(-0.4rem);
-        box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
-        &::after {
-            transform: scaleX(1.4) scaleY(1.6);
-            opacity: 0;
-        }
-    }
-
-    &:active {
-        transform: translateY(-0.1rem);
-        box-shadow: 0 .5rem 1rem rgba($color-black, 0.2);
-    }
-
-    &--white {
-        background-color: $color-white;
-        color: $color-gray-dark;
-        &::after{
-            background-color: $color-white;
-        }
-    }
-
-    &--green {
-        background-color: $color-primary;
-        color: $color-white;
-        &::after{
-            background-color: $color-primary;
-        }
-    }
+  &--animated {
+    animation: slideBottom 0.7s ease-out 0.75s;
+    animation-fill-mode: backwards;
+  }
 
+  &:hover {
+    transform: translateY(-0.4rem);
+    box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
     &::after {
-        content: "";
-        display: inline-block;
-        height: 100%;
-        width: 100%;
-        border-radius: 10rem;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-        transition: all 0.4s;
+      transform: scaleX(1.4) scaleY(1.6);
+      opacity: 0;
     }
+  }
+
+  &:active,
+  &:focus {
+    transform: translateY(-0.1rem);
+    box-shadow: 0 0.5rem 1rem rgba($color-black, 0.2);
+  }
+
+  &--white {
+    background-color: $color-white;
+    color: $color-gray-dark;
+    &::after {
+      background-color: $color-white;
+    }
+  }
+
+  &--green {
+    background-color: $color-primary;
+    color: $color-white;
+    &::after {
+      background-color: $color-primary;
+    }
+  }
+
+  &::after {
+    content: "";
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    border-radius: 10rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    transition: all 0.4s;
+  }
 }
 
 .btn-text {
-    &:link,
-    &:visited {
-        font-size: $default-font-size;
-        color: $color-primary;
-        display: inline-block;
-        text-decoration: none;
-        border-bottom: 1px solid $color-primary;
-        padding: 3px;
-        transition: all .2s;
-    }
+  &:link,
+  &:visited {
+    font-size: $default-font-size;
+    color: $color-primary;
+    display: inline-block;
+    text-decoration: none;
+    border-bottom: 1px solid $color-primary;
+    padding: 3px;
+    transition: all 0.2s;
+  }
 
-    &:hover {
-        background-color: $color-primary;
-        color: $color-white;
-        box-shadow: 0 1rem 2reem rgba($color-black, .15);
-        transform: translateY(-2px);
-    }
+  &:hover {
+    background-color: $color-primary;
+    color: $color-white;
+    box-shadow: 0 1rem 2reem rgba($color-black, 0.15);
+    transform: translateY(-2px);
+  }
 
-    &:active {
-
-        box-shadow: 0 .5rem 1reem rgba($color-black, .15);
-        transform: translateY(0px);
-    }
+  &:active {
+    box-shadow: 0 0.5rem 1reem rgba($color-black, 0.15);
+    transform: translateY(0px);
+  }
 }