Gravity Button Using Pure CSS

Gravity Button Using Pure CSS
Code Snippet:Pure CSS gravity button (no Firefox yet)
Author: Ana Tudor
Published: March 31, 2024
Last Updated: March 31, 2024
Downloads: 1,610
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a “Gravity Button” using Pure CSS. The button has animated particles and changes speed with a checkbox. It helps add visual appeal to buttons.

You can use this code on any website or web application that needs interactive buttons. It adds a dynamic visual element to your UI without relying on JavaScript. Plus, it enhances the user experience with smooth animations and customizable styles.

How to Create Gravity Button Using Pure CSS

1. First of all, load the Google Fonts and Prefixfree JS by adding the following CDN links into the head tag of your HTML document.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Orbitron&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. Begin by setting up the HTML structure. You’ll need an input checkbox and a label for controlling the button’s speed, along with a button element for the gravity button itself.

<input id="slow" type="checkbox"/>
<label for="slow">slow motion</label>
<button>chocolate coated gingerbread<span class="wrap" aria-hidden="true"><span class="particle" style="--a: -45deg; --x: 53%; --y: 15%; --d: 4em; --f: .7; --t: .15"></span><span class="particle" style="--a: 150deg; --x: 40%; --y: 70%; --d: 7.5em; --f: .8; --t: .08"></span><span class="particle" style="--a: 10deg; --x: 90%; --y: 65%; --d: 7em; --f: .6; --t: .25"></span><span class="particle" style="--a: -120deg; --x: 15%; --y: 10%; --d: 4em"></span><span class="particle" style="--a: -175deg; --x: 10%; --y: 25%; --d: 5.25em; --f: .6; --t: .32"></span><span class="particle" style="--a: -18deg; --x: 80%; --y: 25%; --d: 4.75em; --f: .5; --t: .4"></span><span class="particle" style="--a: -160deg; --x: 30%; --y: 5%; --d: 9em; --f: .9; --t: .5"></span><span class="particle" style="--a: 175deg; --x: 9%; --y: 30%; --d: 6em; --f: .95; --t: .6"></span><span class="particle" style="--a: -10deg; --x: 89%; --y: 25%; --d: 4.5em; --f: .55; --t: .67"></span><span class="particle" style="--a: -140deg; --x: 40%; --y: 10%; --d: 5em; --f: .85; --t: .75"></span><span class="particle" style="--a: 90deg; --x: 45%; --y: 65%; --d: 4em; --f: .5; --t: .83"></span><span class="particle" style="--a: 30deg; --x: 70%; --y: 80%; --d: 6.5em; --f: .75; --t: .92"></span></span></button>

3. Next, add the following CSS code. This CSS will handle the appearance and animations of the gravity button and its particles. It includes styles for the button, particles, and animation effects.

@charset "UTF-8";
@property --k {
  syntax: "<number>";
  initial-value: -1;
  inherits: true;
}
html, body {
  display: grid;
}

html {
  height: 100%;
}

body {
  place-content: center;
  overflow-x: hidden;
}

button {
  --m: 1;
  grid-area: 2/1/span 1/span 2;
  position: relative;
  margin: 1em;
  border: solid 2em transparent;
  padding: 1.5em 3.25em;
  border-radius: 5em;
  box-shadow: inset 0 0 1px #23429e;
  background: radial-gradient(#111a39, 67.5%, #3476da) padding-box, radial-gradient(#a0c2ed, 35%, #a0c2ed00 70%) 50% 0/80% 50% repeat-y;
  color: #f2fdfe;
  font: 700 1.5em/1 montserrat, sans-serif;
}
#slow:checked ~ button {
  --m: 5 ;
}

@keyframes k {
  0%, 33.3% {
    --k: 1 ;
  }
}
.particle {
  --f: 1;
  --pos-k: max(0, var(--k));
  --neg-k: max(0, -1*var(--k));
  --low-c: min(1, 4*(1 - var(--pos-k)));
  --abs-d: max(var(--neg-k) - .5, .5 - var(--neg-k));
  --mov-f: var(--pos-k);
  display: grid;
  position: absolute;
  left: var(--x);
  top: var(--y);
  rotate: var(--a);
  animation: k calc(var(--m)*1s) linear calc(var(--m)*var(--t, 0)*1s) infinite;
}
@supports (scale: sqrt(4)) {
  .particle {
    --mov-f: sqrt(var(--pos-k)) ;
  }
}
.particle::before, .particle::after {
  grid-area: 1/1;
  width: 0.75em;
  aspect-ratio: 1;
}
.particle::before {
  --sa: calc(min(1, 1 - 2*min(.5, var(--mov-f)))*45deg);
  border-radius: calc(1.25*min(.8, var(--mov-f))*50%) 50% 50%;
  transform-origin: 0 0;
  translate: calc(var(--mov-f)*var(--d));
  rotate: -45deg;
  scale: var(--f);
  transform: skew(var(--sa), var(--sa));
  opacity: var(--low-c);
  filter: Saturate(var(--low-c));
  background: radial-gradient(at 85% 85%, #bad9fa, #3e66a4 75%);
  content: "";
}
.particle::after {
  translate: -50% -50%;
  scale: calc(var(--f)*(1 - 2*var(--abs-d)));
  text-align: center;
  filter: blur(0.5px);
  content: "✦";
}

[type=checkbox] {
  justify-self: end;
  margin: 5px;
  width: 1em;
  aspect-ratio: 1;
}
[type=checkbox], [type=checkbox] + label {
  align-self: center;
  font: 1.25em orbitron, monospace;
  cursor: pointer;
}

Feel free to customize the CSS properties to match your design preferences. You can adjust the button’s colors, fonts, and particle animations to suit your website’s theme.

That’s all! hopefully, you have successfully created Gravity Button Using Pure CSS. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X