API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 10th, 2020
268
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.04 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.   <style>
  3.     .button {
  4.     --background: #1E2235;
  5.     --color: #F6F8FF;
  6.     --shadow: rgba(0, 9, 61, 0.24);
  7.     --cannon-dark: #A6ACCD;
  8.     --cannon-light: #F6F8FF;
  9.     --cannon-shadow: rgba(13, 15, 24, 0.9);
  10.     --confetti-1: #892AB8;
  11.     --confetti-2: #EA4C89;
  12.     --confetti-3: #FFFF04;
  13.     --confetti-4: #4AF2FD;
  14.     --z-before: -6;
  15.     display: block;
  16.     outline: none;
  17.     cursor: pointer;
  18.     position: relative;
  19.     border: 0;
  20.     background: none;
  21.     padding: 9px 22px 9px 16px;
  22.     line-height: 26px;
  23.     font-family: inherit;
  24.     font-weight: 600;
  25.     font-size: 14px;
  26.     color: var(--color);
  27.     -webkit-appearance: none;
  28.     -webkit-tap-highlight-color: transparent;
  29.     -webkit-transition: -webkit-transform var(--transform-duration, 0.4s);
  30.     transition: -webkit-transform var(--transform-duration, 0.4s);
  31.     transition: transform var(--transform-duration, 0.4s);
  32.     transition: transform var(--transform-duration, 0.4s), -webkit-transform var(--transform-duration, 0.4s);
  33.     will-change: transform;
  34.     -webkit-transform-style: preserve-3d;
  35.             transform-style: preserve-3d;
  36.     -webkit-transform: perspective(440px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateZ(0);
  37.             transform: perspective(440px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateZ(0);
  38.   }
  39.   .button:hover {
  40.     --transform-duration: .16s;
  41.   }
  42.   .button.success {
  43.     --confetti-scale: 0;
  44.     --stroke-dashoffset: 15;
  45.   }
  46.   .button:before {
  47.     content: '';
  48.     position: absolute;
  49.     left: 0;
  50.     top: 0;
  51.     right: 0;
  52.     bottom: 0;
  53.     border-radius: 12px;
  54.     -webkit-transform: translateZ(calc(var(--z-before) * 1px));
  55.             transform: translateZ(calc(var(--z-before) * 1px));
  56.     background: var(--background);
  57.     box-shadow: 0 4px 8px var(--shadow);
  58.   }
  59.   .button .icon,
  60.   .button span {
  61.     display: inline-block;
  62.     vertical-align: top;
  63.     position: relative;
  64.     z-index: 1;
  65.   }
  66.   .button .icon {
  67.     --z: 2px;
  68.     width: 24px;
  69.     height: 14px;
  70.     margin: 8px 16px 0 0;
  71.     -webkit-transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)) translateZ(2px);
  72.             transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)) translateZ(2px);
  73.   }
  74.   .button .icon .confetti {
  75.     position: absolute;
  76.     left: 17px;
  77.     bottom: 9px;
  78.   }
  79.   .button .icon .confetti svg {
  80.     width: 18px;
  81.     height: 16px;
  82.     display: block;
  83.     stroke-width: 1px;
  84.     fill: none;
  85.     stroke-linejoin: round;
  86.     stroke-linecap: round;
  87.   }
  88.   .button .icon .confetti svg * {
  89.     -webkit-transition: stroke-dashoffset .2s;
  90.     transition: stroke-dashoffset .2s;
  91.     stroke-dasharray: 15 20;
  92.     stroke-dashoffset: var(--stroke-dashoffset, 0);
  93.     stroke: var(--stroke-all, var(--stroke, var(--confetti-2)));
  94.   }
  95.   .button .icon .confetti svg *:nth-child(2) {
  96.     --stroke: var(--confetti-3);
  97.   }
  98.   .button .icon .confetti svg *:nth-child(3) {
  99.     --stroke: var(--confetti-1);
  100.   }
  101.   .button .icon .confetti .emitter {
  102.     position: absolute;
  103.     left: 4px;
  104.     bottom: 4px;
  105.     pointer-events: none;
  106.   }
  107.   .button .icon .confetti .emitter div {
  108.     width: 4px;
  109.     height: 4px;
  110.     margin: -2px 0 0 -2px;
  111.     border-radius: 1px;
  112.     position: absolute;
  113.     left: 0;
  114.     top: 0;
  115.     -webkit-transform-style: preserve-3d;
  116.             transform-style: preserve-3d;
  117.     background: var(--confetti-all, var(--b, none));
  118.   }
  119.   .button .icon .confetti i {
  120.     width: 4px;
  121.     height: 4px;
  122.     display: block;
  123.     -webkit-transform: scale(var(--confetti-scale, 0.5));
  124.             transform: scale(var(--confetti-scale, 0.5));
  125.     position: absolute;
  126.     -webkit-transition: -webkit-transform .25s;
  127.     transition: -webkit-transform .25s;
  128.     transition: transform .25s;
  129.     transition: transform .25s, -webkit-transform .25s;
  130.     left: var(--left, -1px);
  131.     top: var(--top, 3px);
  132.     border-radius: var(--border-radius, 1px);
  133.     background: var(--confetti-background, var(--confetti-3));
  134.   }
  135.   .button .icon .confetti i:nth-child(2) {
  136.     --left: 9px;
  137.     --top: -1px;
  138.     --border-radius: 2px;
  139.     --confetti-background: var(--confetti-4);
  140.   }
  141.   .button .icon .confetti i:nth-child(3) {
  142.     --left: 5px;
  143.     --top: 3px;
  144.     --confetti-background: var(--confetti-1);
  145.   }
  146.   .button .icon .confetti i:nth-child(4) {
  147.     --left: 10px;
  148.     --top: 14px;
  149.     --confetti-background: var(--confetti-2);
  150.   }
  151.   .button .icon .confetti i:nth-child(5) {
  152.     --left: 9px;
  153.     --top: 7px;
  154.     --confetti-background: var(--confetti-4);
  155.   }
  156.   .button .icon .confetti i:nth-child(6) {
  157.     --left: 6px;
  158.     --top: 8px;
  159.     --border-radius: 2px;
  160.     --confetti-background: var(--confetti-2);
  161.   }
  162.   .button .icon .cannon {
  163.     position: relative;
  164.     width: 24px;
  165.     height: 14px;
  166.     -webkit-transform: translate(0, 3px) rotate(-45deg);
  167.             transform: translate(0, 3px) rotate(-45deg);
  168.     -webkit-filter: drop-shadow(-2px 2px 2px var(--cannon-shadow));
  169.             filter: drop-shadow(-2px 2px 2px var(--cannon-shadow));
  170.   }
  171.   .button .icon .cannon:before, .button .icon .cannon:after {
  172.     content: '';
  173.     display: block;
  174.     height: 14px;
  175.   }
  176.   .button .icon .cannon:before {
  177.     background: -webkit-gradient(linear, left top, left bottom, from(var(--cannon-dark)), color-stop(50%, var(--cannon-light)), to(var(--cannon-dark)));
  178.     background: linear-gradient(var(--cannon-dark), var(--cannon-light) 50%, var(--cannon-dark));
  179.     width: 100%;
  180.     -webkit-clip-path: polygon(25px -1px, 0 52%, 25px 15px);
  181.     clip-path: polygon(25px -1px, 0 52%, 25px 15px);
  182.   }
  183.   .button .icon .cannon:after {
  184.     width: 6px;
  185.     position: absolute;
  186.     right: -3px;
  187.     top: 0;
  188.     border-radius: 50%;
  189.     box-shadow: inset 0 0 0 0.5px var(--cannon-light);
  190.     background: -webkit-gradient(linear, left top, right top, from(var(--cannon-dark)), to(var(--cannon-light)));
  191.     background: linear-gradient(90deg, var(--cannon-dark), var(--cannon-light));
  192.   }
  193.   .button.white {
  194.     --background: #fff;
  195.     --color: #1E2235;
  196.     --border: #E1E6F9;
  197.     --shadow: none;
  198.     --cannon-dark: #103FC5;
  199.     --cannon-light: #275EFE;
  200.     --cannon-shadow: rgba(0, 9, 61, 0.2);
  201.   }
  202.   .button.white:before {
  203.     box-shadow: inset 0 0 0 1px var(--border);
  204.   }
  205.  
  206.   html {
  207.     box-sizing: border-box;
  208.     -webkit-font-smoothing: antialiased;
  209.   }
  210.  
  211.   * {
  212.     box-sizing: inherit;
  213.   }
  214.   *:before, *:after {
  215.     box-sizing: inherit;
  216.   }
  217.  
  218.   body {
  219.     min-height: 100vh;
  220.     display: -webkit-box;
  221.     display: flex;
  222.     font-family: 'Inter', Arial;
  223.     -webkit-box-pack: center;
  224.             justify-content: center;
  225.     -webkit-box-align: center;
  226.             align-items: center;
  227.     background: #F6F8FF;
  228.   }
  229.   body .button {
  230.     margin: 0 16px;
  231.   }
  232.   </style>
  233.   <body>
  234.     <button class="button white">
  235.       <div class="icon">
  236.         <div class="cannon"></div>
  237.         <div class="confetti">
  238.           <svg viewBox="0 0 18 16">
  239.             <polyline points="1 10 4 7 4 5 6 1" />
  240.             <path d="M4,13 C5.33333333,9 7,7 9,7 C11,7 12.3340042,6 13.0020125,4" />
  241.             <path
  242.              d="M6,15 C7.83362334,13.6666667 9.83362334,12.6666667 12,12 C14.1663767,11.3333333 15.8330433,9.66666667 17,7" />
  243.           </svg>
  244.           <i></i><i></i><i></i><i></i><i></i><i></i>
  245.           <div class="emitter"></div>
  246.         </div>
  247.       </div>
  248.       <span>Confirm</span>
  249.     </button>
  250.   </body>
  251.   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
  252.   <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js"></script>
  253.   <script>
  254.     gsap.registerPlugin(Physics2DPlugin);
  255.  
  256.     document.querySelectorAll('.button').forEach(button => {
  257.  
  258.       const bounding = button.getBoundingClientRect()
  259.  
  260.       button.addEventListener('mousemove', e => {
  261.  
  262.         let dy = (e.clientY - bounding.top - bounding.height / 2) / -1
  263.         let dx = (e.clientX - bounding.left - bounding.width / 2) / 10
  264.  
  265.         dy = dy > 10 ? 10 : (dy < -10 ? -10 : dy);
  266.        dx = dx > 4 ? 4 : (dx < -4 ? -4 : dx);
  267.  
  268.        button.style.setProperty('--rx', dy);
  269.        button.style.setProperty('--ry', dx);
  270.  
  271.      });
  272.  
  273.      button.addEventListener('mouseleave', e => {
  274.  
  275.         button.style.setProperty('--rx', 0)
  276.         button.style.setProperty('--ry', 0)
  277.  
  278.       });
  279.  
  280.       button.addEventListener('click', e => {
  281.         button.classList.add('success');
  282.         gsap.to(button, {
  283.           '--icon-x': -3,
  284.           '--icon-y': 3,
  285.           '--z-before': 0,
  286.           duration: .2,
  287.           onComplete() {
  288.             particles(button.querySelector('.emitter'), 100, 0, 0, -80, -50);
  289.             gsap.to(button, {
  290.               '--icon-x': 0,
  291.               '--icon-y': 0,
  292.               '--z-before': -6,
  293.               duration: 1,
  294.               ease: 'elastic.out(1, .5)',
  295.               onComplete() {
  296.                 button.classList.remove('success');
  297.               }
  298.             });
  299.           }
  300.         });
  301.       });
  302.  
  303.     });
  304.  
  305.     function particles(parent, quantity, x, y, minAngle, maxAngle) {
  306.       let colors = [
  307.         '#FFFF04',
  308.         '#EA4C89',
  309.         '#892AB8',
  310.         '#4AF2FD',
  311.       ];
  312.       for (let i = quantity - 1; i >= 0; i--) {
  313.         let angle = gsap.utils.random(minAngle, maxAngle),
  314.           velocity = gsap.utils.random(70, 140),
  315.           dot = document.createElement('div');
  316.         dot.style.setProperty('--b', colors[Math.floor(gsap.utils.random(0, 4))]);
  317.         parent.appendChild(dot);
  318.         gsap.set(dot, {
  319.           opacity: 1,
  320.           x: x,
  321.           y: y,
  322.           scale: gsap.utils.random(.4, .7)
  323.         });
  324.         gsap.timeline({
  325.           onComplete() {
  326.             dot.remove();
  327.           }
  328.         }).to(dot, {
  329.           duration: 1.8,
  330.           physics2D: {
  331.             angle: angle,
  332.             velocity: velocity,
  333.             gravity: 120
  334.           }
  335.         }).to(dot, {
  336.           duration: 1,
  337.           opacity: 0
  338.         }, .8);
  339.       }
  340.     }
  341.   </script>
  342. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!