Step into the world of HTML and CSS magic as we guide you through the creation of a stunning Gravity Button. Explore the simplicity and beauty of Pure CSS animations.
Table of Contents
Welcome to the world of captivating user interfaces! In this tutorial, we'll explore the art of creating a Pure CSS Gravity Button. Buckle up for an exciting journey into the realms of HTML and CSS magic.
Before diving into code, let's grasp the concept of a gravity button. It's all about crafting an illusion of weight and interaction using CSS animations. The button will respond to user actions, adding a touch of dynamism to your web page.
Let's start making an amazing gravity button menu using HTML and CSS step by step.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
The foundation of any web element is its HTML structure. Begin by setting up a simple HTML file with the necessary elements to house your gravity button.
How to:
- Create a new HTML file.
- Define the button element within the body.
Let's break down the code step by step:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used. In this case, it's HTML5.
2. <html lang="en">: This tag defines the root element of the HTML document. The lang attribute indicates that the content is in English.
3. <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, linked stylesheets, and the title of the page.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport settings for responsive design on various devices.
- <link rel="preconnect" href="https://fonts.googleapis.com">: Preconnects to the Google Fonts API to improve performance.
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>: Preconnects to the Google Fonts domain with crossorigin attribute.
- <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Orbitron&display=swap" rel="stylesheet">: Links to Google Fonts and specifies the fonts "Montserrat" and "Orbitron" to be used in the document.
- <link rel="stylesheet" href="styles.css">: Links an external stylesheet named "styles.css" to the HTML document.
- <title>Pure CSS Gravity Button</title>: Sets the title of the HTML document displayed in the browser tab.
4. <body>: This section contains the content of the HTML document.
- <input id="slow" type="checkbox"/>: An input element of type checkbox with the id "slow."
- <label for="slow">slow motion</label>: A label associated with the checkbox using the for attribute.
- <button>Button...: A button element with the text "Button" and a complex structure inside it. The button has a gravity effect created using pure CSS. It includes several nested <span> elements with the class "particle," each having inline styles to control its position, rotation, size, and other properties. The gravity effect is achieved through the use of CSS variables (--a, --x, --y, --d, --f, --t). These variables control the angle, position, distance, force, and transition duration of each particle.
Step 2 (CSS Code):
Now, let's breathe life into our button. Craft the CSS styles that will generate the gravity effect, making your button visually enticing.
How to:
- Link your CSS file to the HTML document.
- Set initial styles for the button.
- Define keyframes for the gravity animation.
Let's break down the CSS code step by step:
1. @charset "UTF-8";
- This sets the character encoding for the stylesheet to UTF-8, ensuring proper rendering of text.
2. @property --k {...}
- Defines a custom CSS property named --k with specific syntax, initial value, and inheritance behavior.
3. html, body {...}
- Applies a basic grid display to the HTML and body elements.
4. html {...}
- Sets the height of the HTML element to 100%.
5. body {...}
- Centers the content both horizontally and vertically within the body using the place-content property.
6. button {...}
- Styles a button with various properties including positioning, margins, borders, padding, border-radius, box shadow, and background gradients.
7. #slow:checked ~ button {...}
- Selects and modifies the button when a checkbox with the ID "slow" is checked. It changes the value of a custom property --m to 5.
8. @keyframes k {...}
- Defines a keyframe animation named k with two keyframes (0% and 33.3%) that modifies the value of a custom property --k.
9. .particle {...}
- Styles an element with the class "particle" using CSS custom properties for positioning, rotation, animation, and other visual effects.
10. @supports (scale: sqrt(4)) {...}
- Checks if the scale property with the value sqrt(4) is supported. If supported, it adjusts the movement factor of particles.
11. .particle::before, .particle::after {...}
- Styles the pseudo-elements ::before and ::after of the "particle" class, creating visual effects resembling particles.
12. [type=checkbox] {...}
- Styles checkboxes, adjusting their alignment, margins, width, and aspect ratio.
13. [type=checkbox], [type=checkbox] + label {...}
- Further styles for checkboxes and their associated labels, setting font, alignment, and cursor properties.
@charset "UTF-8";
@property --k {
syntax: "";
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 ~ 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;
} Final Output:
Conclusion:
Congratulations! You've successfully crafted a Pure CSS Gravity Button. Embrace the newfound knowledge and elevate your web design projects with this visually appealing UI element. Stay tuned for more HTML and CSS wonders!
Code by: Ana Tudor
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
