TikTok Tutorial #83 - How to create the perfect checkout button

Learn with us how to create an awesome checkout button!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim ♬ Insane Yorker – Bruno Boe

Get your code ⬇️

1. HTML Code

<div class="center">
  <h1>Daily UI 002: Credit Card Checkout</h1>
  <div class="wrapper">
    <button class="checkout">Checkout</button>
    <div class="card-wrap">
      <div class="card">
        [[[https://codepen.io/alexzaworski/pen/b8db19494e266b36923ed9231645a6a5]]]
      </div>
    </div>
  </div>
</div>

2. CSS Code

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, html {
  height: 100%;
}

body {
  display:flex;
  background: #DAECF7;
  flex-direction: column;
}

h1 {
  font-size: 1em;
  font-family: "Montserrat";
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
  color: #b6d0e0;
  position: relative;
  margin-top: -15px;
  line-height: 15px;
}

.center {
  margin: auto;
}
.wrapper {
  width: 700px;
  flex-shrink: 0;
  background: white;
  overflow:hidden;
  height: 364px;
  border-radius: 8px;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.card-wrap {
  width: 260px;
  float:right;
  background: #665aa7;
  padding: 50px;
  transform:
    scale(1.5)
    rotate(20deg);
}

.card {
  transform:
    scale(.75)
    rotate(-20deg);
}
svg {
  &:not(:root) {
    overflow:visible;
  }
  width: 150%;
  position: relative;
  right: 130px;
  top: 10px;
  overflow:visible;
}

 #sunglasses {
   transition: transform .15s;
   .checkout:hover ~ .card-wrap & {
     transform: translateY(-40px);
   }
}

#right_eye {
  &_wink {
    display:none;
  }
  .checkout:active ~ .card-wrap & {
    display:none;
    &_wink {
      display:block;
    }
  }
}

#mouth {
  transition: transform .15s;
  .checkout:hover ~ .card-wrap & {
    transform: translateY(-10px);
  }
}

#front_hand, #back_hand {
  transition: transform .03s;
  .checkout:active ~ .card-wrap & {
    transform: translateX(10px);
  }
}

.checkout {
  outline: none;
  background: #665aa7;
  border: 0;
  color: white;
  position: relative;
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
  padding: 12px 16px;
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 1.1em;
  letter-spacing: .1em;
  border-radius: 4px;
  transition: all .1s ease-out;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  &:hover:not(:active) {
    background: lighten(#665aa7, 10%);
  }
}

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources:

Similar Posts