TikTok Tutorial #89 - How to create a Gravity Button with CSS

This looks so… magical! It’s the perfect fit for a code wizard, so here’s your spell!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim I mean… gravity IS magic, right? 🪐 🔗Link in Bio for the full code #webdev #gravity #button #code #programmer #coding #tutorial ♬ Show Me How - Men I Trust

Contents:
1. HTML Code
2. CSS Code
3. Javascript Code

Get your code ⬇️

1. HTML Code

input#slow(type='checkbox')
label(for='slow') slow motion

button chocolate coated gingerbread
	span.wrap(aria-hidden='true')
		span.particle(style=`--a: -45deg; --x: 53%; --y: 15%; --d: 4em; --f: .7; --t: .15`)
		span.particle(style=`--a: 150deg; --x: 40%; --y: 70%; --d: 7.5em; --f: .8; --t: .08`)
		span.particle(style=`--a: 10deg; --x: 90%; --y: 65%; --d: 7em; --f: .6; --t: .25`)
		span.particle(style=`--a: -120deg; --x: 15%; --y: 10%; --d: 4em`)
		span.particle(style=`--a: -175deg; --x: 10%; --y: 25%; --d: 5.25em; --f: .6; --t: .32`)
		span.particle(style=`--a: -18deg; --x: 80%; --y: 25%; --d: 4.75em; --f: .5; --t: .4`)
		span.particle(style=`--a: -160deg; --x: 30%; --y: 5%; --d: 9em; --f: .9; --t: .5`)
		span.particle(style=`--a: 175deg; --x: 9%; --y: 30%; --d: 6em; --f: .95; --t: .6`)
		span.particle(style=`--a: -10deg; --x: 89%; --y: 25%; --d: 4.5em; --f: .55; --t: .67`)
		span.particle(style=`--a: -140deg; --x: 40%; --y: 10%; --d: 5em; --f: .85; --t: .75`)
		span.particle(style=`--a: 90deg; --x: 45%; --y: 65%; --d: 4em; --f: .5; --t: .83`)
		span.particle(style=`--a: 30deg; --x: 70%; --y: 80%; --d: 6.5em; --f: .75; --t: .92`)

2. CSS Code

$t: 1s;

@property --k {
	syntax: '<number>';
	initial-value: -1;
	inherits: true
}

html, body { display: grid }

html { height: 100% }

body { place-content: center }

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 ~ & { --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)*#{$t}) linear calc(var(--m)*var(--t, 0)*#{$t}) infinite;
	
	@supports (scale: sqrt(4)) { --mov-f: sqrt(var(--pos-k)) }
	
	&::before, &::after {
		grid-area: 1/ 1;
		width: .75em;
		aspect-ratio: 1
	}
	
	&::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: ''
	}
	
	&::after {
		translate: -50% -50%;
		scale: calc(var(--f)*(1 - 2*var(--abs-d)));
		text-align: center;
		filter: blur(.5px);
		content: '✦'
	}
}

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

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources:

1. HTML Code

2. CSS Code

You might also like...