CodeMyUI

label.switch
  input(type='checkbox' checked)
  .button
    .light
    .dots
    .characters
    .shine
    .shadow

CodeMyUI

<canvas class="webgl"></canvas>
<div class="info">
    <svg id="hand" viewBox="0 0 175 200" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M173.272 82.5157C161.668 70.5528 146.803 62.2655 130.526 58.6846C118.575 55.6811 106.321 54.0528 94.0011 53.8313V20.8535C93.8062 15.2638 91.4057 9.97869 87.3246 6.15411C83.2435 2.32953 77.8139 0.276704 72.2233 0.444604C66.6327 0.276704 61.2031 2.32953 57.122 6.15411C53.0409 9.97869 50.6404 15.2638 50.4455 20.8535V83.0757L40.49 73.2446C36.1045 68.9428 30.2064 66.5329 24.0633 66.5329C17.9201 66.5329 12.0221 68.9428 7.63662 73.2446C5.43939 75.3674 3.69046 77.9095 2.49342 80.7204C1.29638 83.5313 0.675563 86.5539 0.667733 89.609C0.553645 95.5326 2.79095 101.26 6.88996 105.538L35.8855 139.885C37.2844 148.66 40.3015 157.1 44.7833 164.773C48.0577 170.674 52.2595 176.011 57.2277 180.578V192.525C57.2082 194.228 57.8424 195.874 58.9999 197.124C60.1573 198.374 61.75 199.133 63.45 199.245H150.001C151.701 199.133 153.294 198.374 154.451 197.124C155.609 195.874 156.243 

CodeMyUI

#wrap
 %form.signup
  %input.email{:minlength => "4", :maxlength => "22", :type => "email", :required => "", :placeholder => "email"}/
  %input.submit{:type => "submit", :value => "Subscribe"}/
  .field
   %p.text.initial{"data-splitting" => "chars"} email
   .graves
    .ghost
     .ghostbody
    -2.times do

CodeMyUI

Image Particle Rain with Vanilla JavaScript

A Pen by Frank on CodePen.

License.

DEMO https://codemyui.com/?p=30150

CodeMyUI

Coin Flip Donate Button

A simple idea that ended up being really hard to pull off. No 3D elements or transformations are used in this experiment, only 2D elements and some clever math to give the illusion of a 3D coin with real thickness. I'm happy with the results given the limitations of HTML and CSS.

The coin flipping is actually randomized too -- if you press the button a few times you'll see.

A Pen by Cooper Goeke on CodePen.

License.

CodeMyUI

<button class="pay-button">
    <span class="default">Yeah, I want that</span>
    <span class="success">
        Redirected
        <svg viewbox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
    </span>
    <div class="truck-wrapper">
        <div class="truck">

CodeMyUI

📦 Button

A Pen by Andreas Storm on CodePen.

License.

CodeMyUI

<div class="main">
  <svg viewBox="0 0 630 352" xmlns="http://www.w3.org/2000/svg">
    <mask id="m1">
        <image class="m" xlink:href="https://assets.codepen.io/721952/liquidMask1.svg" y="-1" width="630" height="10620" />
    </mask>
    <mask id="m2">
        <image class="m" class="maskImg" xlink:href="https://assets.codepen.io/721952/liquidMask1.svg" y="-1" width="630" height="10620" />
    </mask>
    <image mask="url(#m2)" xlink:href="https://images.unsplash.com/photo-1597626564517-426e3c39ebbe?auto=format&fit=crop&w=1260&q=50" width="630" height="420" />
    <g mask="url(#m1)">

CodeMyUI

Candy Color Button Animation

A Pen by Yuhomyan on CodePen.

License.

CodeMyUI

<div class="container">
  <div class="switch">
    <div class="toggle-button">
      <div class="toggle"></div>
      <div class="moon-mask"></div>
      <div class="circles-wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>