Улучшенная кнопка оформления заказа - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="container">

  <button class="checkout-btn">

    <span class="checkout-btn__icon material-icons-outlined">

      shopping_cart

    </span>

    <span class="checkout-btn__text">

      Checkout

    </span>

    <span class="checkout-btn__success">

      <span class="material-icons-outlined">

        done

      </span>

      Thank you for your order!

    </span>

    <span class="checkout-btn__failure">

      <span class="material-icons-outlined">

        error_outline

      </span>

      Order was unable to process.

    </span>

  </button>

</div>



<div class="container">

  <button class="checkout-btn">

    <span class="checkout-btn__icon material-icons-outlined">

      shopping_cart

    </span>

    <span class="checkout-btn__text">

      Checkout

    </span>

    <span class="checkout-btn__success">

      <span class="material-icons-outlined">

        done

      </span>

      Thank you for your order!

    </span>

    <span class="checkout-btn__failure">

      <span class="material-icons-outlined">

        error_outline

      </span>

      Order was unable to process.

    </span>

  </button>

</div>

body {

  height: 100vh;

  width: 100vw;

  display: flex;

  flex-flow: column;

  align-items: center;

  justify-content: center;

  background: #ecf0f1;

  font-family: "Inter", sans-serif;

}

@media (min-width: 640px) {

  body {

    flex-flow: row;

  }

}



* {

  box-sizing: border-box;

}



.container {

  flex: 1;

  height: 100%;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.checkout-btn {

  cursor: pointer;

  position: relative;

  background: #3498db;

  width: 140px;

  color: white;

  border: none;

  border-radius: 0.65rem;

  display: flex;

  align-items: center;

  justify-content: space-around;

  padding: 0.75rem 1rem;

  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);

}

.checkout-btn:hover {

  background: #217dbb;

}

.checkout-btn__success, .checkout-btn__failure {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

}

.checkout-btn__success span, .checkout-btn__failure span {

  margin-right: 0.5rem;

}

const checkoutBtns = document.querySelectorAll(".checkout-btn");



checkoutBtns.forEach((btn, index) => {

  const checkoutTL = new gsap.timeline({

    paused: true });





  const btnText = btn.querySelector(".checkout-btn__text");

  const btnIcon = btn.querySelector(".checkout-btn__icon");

  const btnSuccess = btn.querySelector(".checkout-btn__success");

  const btnFailure = btn.querySelector(".checkout-btn__failure");



  checkoutTL.

  to(btnText, {

    opacity: 0,

    duration: 0.75,

    ease: "power4.in" }).



  to(

  btnIcon,

  {

    x: 150,

    delay: 0.25,

    duration: 0.75,

    opacity: 0,

    ease: "back.in(1.7)" },



  "<");



  btn.addEventListener("click", () => {

    if (index === 0) {

      checkoutTL.

      to(btn, {

        background: "#27ae60",

        ease: "power4.out",

        width: 300 }).



      to(

      btnSuccess,

      {

        opacity: 1,

        ease: "power4.out",

        delay: 0.25 },



      "<");



    } else {

      checkoutTL.

      to(btn, {

        background: "#c0392b",

        ease: "power4.out",

        width: 300 }).



      to(

      btnFailure,

      {

        opacity: 1,

        ease: "power4.out",

        delay: 0.25 },



      "<");



    }



    checkoutTL.play();



    setTimeout(() => {

      checkoutTL.restart();

      checkoutTL.pause();

    }, 6000);

  });

});

//# sourceURL=pen.js