Gravity Button Using Pure CSS

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.