{"id":5486,"date":"2020-09-16T08:25:00","date_gmt":"2020-09-16T08:25:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5486"},"modified":"2020-09-15T08:35:49","modified_gmt":"2020-09-15T08:35:49","slug":"tutorial-fancy-submit-button-interactions","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/tutorial-fancy-submit-button-interactions\/","title":{"rendered":"Tutorial: Fancy Submit Button Interactions"},"content":{"rendered":"\n

Description<\/h2>\n\n\n\n

Fancy Submit Button Interactions that displays a loading spinner (w\/ or w\/o progress bar) in the submit button when submitting and shows a success message when a specific process is completely finished.<\/p>\n\n\n\n

How To<\/h2>\n\n\n\n

Create submit buttons.<\/strong><\/p>\n\n\n\n

<div class=\"submit-buttons\">\n  <div class=\"submit-buttons__block\">\n    <h4 class=\"submit-buttons__title\">Submit 1<\/h4>\n      <div class=\"submit-buttons__content\">\n        <button class=\"submit-button submit-button--1\" type=\"submit\" title=\"Submit\">\n          <span class=\"submit-button__pending submit-button__pending--1\"><\/span>\n          <span class=\"submit-button__text submit-button__text--1\">Submit<\/span>\n          <span class=\"submit-button__loaded submit-button__loaded--1\"> <span>Success!<\/span><\/span>\n        <\/button>\n      <\/div>\n  <\/div>\n\n  <div class=\"submit-buttons__block\">\n    <h4 class=\"submit-buttons__title\">Submit 2<\/h4>\n    <div class=\"submit-buttons__content\">\n      <button class=\"submit-button submit-button--2\" type=\"submit\" title=\"Submit\">\n        <span class=\"submit-button__pending submit-button__pending--2\"><span class=\"submit-button__pending-loader--2\"><\/span><\/span>\n        <span class=\"submit-button__text submit-button__text--2\">Submit<\/span>\n        <span class=\"submit-button__loaded submit-button__loaded--2\"><\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/div><\/pre>\n\n\n\n
The primary CSS\/CSS3 rules.<\/strong><\/p>\n\n\n\n
.submit-buttons {\n  display: flex;\n  justify-content: space-around;\n  flex-wrap: wrap;\n}\n\n.submit-buttons__block {\n  margin-bottom: 40px;\n}\n\n.submit-buttons__title {\n  margin-bottom: 20px;\n  text-align: center;\n}\n\n.submit-button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 200px;\n  height: 54px;\n  font-size: 14px;\n  font-weight: 700;\n  color: #fff;\n  text-transform: uppercase;\n  letter-spacing: 1.44px;\n  box-shadow: 0px 16px 35px 0 rgba(0, 0, 0, 0.25);\n  outline: none;\n  border: none;\n  overflow: hidden;\n  cursor: pointer;\n}\n\n.submit-button__pending,\n.submit-button__loaded {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-image: inherit;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.submit-button--3 {\n  background-image: linear-gradient(to right bottom, #ff18ab 1%, #6e03ff);\n}\n\n.submit-button--1 {\n  background-image: linear-gradient(to right bottom, #1affec 1%, #9f4ff9);\n}\n\n@keyframes pending-circle {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.submit-button__pending--1 {\n  display: block;\n}\n\n.submit-button__pending--1:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font-family: \"Font Awesome 5 Free\";\n  font-size: 1.6rem;\n  content: '\\f110';\n}\n\n.submit-button__pending--1:after {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  content: '';\n  transform: scaleX(0);\n  transform-origin: left center;\n  background-image: linear-gradient(to right bottom, #ffce3a 1%, #ff0e69);\n  background-size: 100%;\n}\n\n.submit-button__pending--1.js-active {\n  transition-property: all;\n  transition-duration: 0.1s;\n  transition-timing-function: linear;\n  transition-delay: 0.3s;\n  opacity: 1;\n  visibility: visible;\n}\n\n.submit-button__pending--1.js-active:before {\n  animation: pending-circle 1s infinite;\n}\n\n.submit-button__pending--1.js-active:after {\n  transition-property: all;\n  transition-duration: 1.7s;\n  transition-timing-function: cubic-bezier(0, 0, 0.97, 0.13);\n  transition-delay: 0.1s;\n  transform: scaleX(1);\n}\n\n.submit-button__text--1.js-active {\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: linear;\n  transition-delay: 0s;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.submit-button__loaded--1 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.submit-button__loaded--1:before {\n  margin-right: 10px;\n  font-family: \"Font Awesome 5 Free\";\n  font-size: 1.4rem;\n  content: '\\f00c';\n  transform: translate(-10px, -2px);\n}\n\n.submit-button__loaded--1 span {\n  transform: translateX(10px);\n}\n\n.submit-button__loaded--1.js-active {\n  transition: opacity .1s linear 2.1s;\n  opacity: 1;\n  visibility: visible;\n}\n\n.submit-button__loaded--1.js-active:before {\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-timing-function: linear;\n  transition-delay: 2.15s;\n  transform: translate(0, -2px);\n}\n\n.submit-button__loaded--1.js-active span {\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-timing-function: linear;\n  transition-delay: 2.15s;\n  transform: translateX(0);\n}\n\n.submit-button--2 {\n  background-image: linear-gradient(to right bottom, #ffce3a 1%, #ff0e69);\n}\n\n@keyframes pending-loader-circles {\n  0% {\n    opacity: .3;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes pending-loader-moving {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(50px);\n  }\n}\n\n.submit-button__pending--2 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.submit-button__pending--2:before, .submit-button__pending--2:after,\n.submit-button__pending--2 span {\n  position: relative;\n  display: block;\n  margin-right: 5px;\n  width: 10px;\n  height: 10px;\n  background-color: #fff;\n  border-radius: 50%;\n  opacity: .3;\n}\n\n.submit-button__pending--2:before, .submit-button__pending--2:after {\n  content: '';\n}\n\n.submit-button__pending--2:before {\n  animation-delay: 0s;\n}\n\n.submit-button__pending--2 span {\n  animation-delay: .4s;\n}\n\n.submit-button__pending--2:after {\n  animation-delay: .8s;\n}\n\n.submit-button__pending--2.js-active {\n  transition-property: all;\n  transition-duration: 0.1s;\n  transition-timing-function: linear;\n  transition-delay: 0.3s;\n  opacity: 1;\n  visibility: visible;\n}\n\n.submit-button__pending--2.js-active:before {\n  animation: pending-loader-circles .8s linear infinite alternate, pending-loader-moving .2s linear 2s 1 forwards;\n}\n\n.submit-button__pending--2.js-active span {\n  animation: pending-loader-circles .8s linear .4s infinite alternate, pending-loader-moving .2s linear 2.1s 1 forwards;\n}\n\n.submit-button__pending--2.js-active:after {\n  animation: pending-loader-circles .8s linear .8s infinite alternate, pending-loader-moving .2s linear 2.2s 1 forwards;\n}\n\n.submit-button__text--2.js-active {\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: linear;\n  transition-delay: 0s;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.submit-button__loaded--2 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.submit-button__loaded--2:before {\n  display: block;\n  width: 30px;\n  height: 30px;\n  content: '';\n  transform: rotate(0);\n  border: 2px solid transparent;\n  border-radius: 50%;\n}\n\n.submit-button__loaded--2:after {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: block;\n  font-family: \"Font Awesome 5 Free\";\n  font-size: .9rem;\n  content: '\\f00c';\n  transform: translate(-50%, -50%);\n  opacity: 0;\n}\n\n.submit-button__loaded--2.js-active {\n  transition-property: all;\n  transition-duration: 0.1s;\n  transition-timing-function: linear;\n  transition-delay: 2.2s;\n  opacity: 1;\n  visibility: visible;\n}\n\n.submit-button__loaded--2.js-active:before {\n  transition: transform .4s linear 2.3s, border-top-color .1s linear 2.3s, border-right-color .1s linear 2.4s, border-bottom-color .1s linear 2.5s, border-left-color .1s linear 2.6s;\n  transform: rotate(360deg);\n  border-color: #fff;\n}\n\n.submit-button__loaded--2.js-active:after {\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-timing-function: linear;\n  transition-delay: 0.6s;\n  opacity: 1;\n}<\/pre>\n\n\n\n
The main JavaScript to enable the submit interactions.<\/strong><\/p>\n\n\n\n
const DOM = {\n  submitBtn: '.submit-button',\n  submitPending: '.submit-button__pending',\n  submitText: '.submit-button__text',\n  submitLoaded: '.submit-button__loaded'\n};\n\n\/\/find exact children of the button\nconst findChildren = elem => {\n  \n  return [\n    elem.querySelector(DOM.submitPending),\n    elem.querySelector(DOM.submitText),\n    elem.querySelector(DOM.submitLoaded)\n  ];\n  \n};\n\n\/\/find node parent function\nconst findParent = (elem, referenceElem) => {\n  \n  const className = referenceElem.slice(0, referenceElem.length);\n  \n  let ind = true;\n  \n  while (ind) {\n  \n    if(elem.classList.contains(className)) {\n      break;\n    } else {\n      elem = elem.parentNode;\n    }\n    \n  }\n  \n  return elem;\n  \n};\n\n\/\/onclick function for buttons - active state\ndocument.querySelectorAll(DOM.submitBtn).forEach(elem => {\n  \n  elem.addEventListener('click', event => {\n    \n    let clickedElem = findParent(event.target, 'submit-button');\n    \n    const innerChildren = findChildren(clickedElem);\n    \n    \/\/adding active class to the clicked elem\n    if(! clickedElem.classList.contains('js-active')) {\n      \n      clickedElem.classList.add('js-active');\n      \n      innerChildren.forEach(elem => {\n        elem.classList.add('js-active');\n      });\n      \n    } else {\n      \n    }\n    \n  });\n  \n});<\/pre>\n\n\n\n
Author<\/strong>: nat-davydova<\/p>
Demo<\/strong>: Codepen<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Description Fancy Submit Button Interactions that displays a loading spinner (w\/ or w\/o progress bar) in the submit button when submitting and shows a success message when a specific process is completely finished. How To Create submit buttons. <div class=”submit-buttons”> <div class=”submit-buttons__block”> <h4 class=”submit-buttons__title”>Submit 1<\/h4> <div class=”submit-buttons__content”> <button class=”submit-button submit-button–1″ type=”submit” title=”Submit”> <span class=”submit-button__pending submit-button__pending–1″><\/span> […]<\/p>\n","protected":false},"author":2,"featured_media":5487,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,81,12,62],"tags":[25,94,146,116,82,87,110],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Fancy-Submit-Button-Interactions.gif","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1qu","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5486"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5486"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5486\/revisions"}],"predecessor-version":[{"id":5488,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5486\/revisions\/5488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5487"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}