Learn how to create Fortnite-style buttons using HTML and CSS. This step-by-step guide includes source code and customization tips.
Table of Contents
Fortnite has not only revolutionized gaming but also influenced web design trends. One notable aspect is its distinctive button design. These buttons are vibrant, interactive, and visually appealing, making them perfect for websites looking to capture a similar energetic vibe. This tutorial will guide you through creating Fortnite-style buttons using HTML and CSS. Whether you are a beginner or an experienced developer, this guide will help you enhance your web projects with stylish buttons.
Source Code
Step 1 (HTML Code):
To start creating Fortnite buttons, we need a basic HTML structure. This involves defining the button element and adding some classes for styling. Let's break down the HTML code step by step:
1. Document Declaration and HTML Tag
<!DOCTYPE html> <html lang="en">
<!DOCTYPE html>: Declares the document as an HTML5 document.<html lang="en">: Starts the HTML document with the language attribute set to English.
2. Head Section
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Fortnite Buttons</title> <link rel="stylesheet" href="styles.css"> </head>
<meta charset="UTF-8" />: Sets the character encoding to UTF-8.<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Ensures the document is displayed in the latest IE mode.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport to make the web page responsive.<title>Fortnite Buttons</title>: Sets the title of the web page.<link rel="stylesheet" href="styles.css">: Links an external CSS file named styles.css for styling the document.
3. Body Section
<body>
<div class="row">
<button class="tab">PLAY<span></span></button>
<button>LOCKER<span></span></button>
<button>BATTLE PASS<span></span></button>
<button>SHOP<span></span></button>
<button>QUESTS<span></span></button>
<button>V-BUCKS<span></span></button>
</div>
<div class="play-cont">
<h1>LEGO FORTNITE</h1>
<button class="mode play">SELECT WORLD<span></span></button>
<button class="play">PLAY<span></span></button>
</div>
</body>
</html>
<div class="row">: A div container with the class row that contains several buttons.<button class="tab">PLAY<span></span></button>: A button with the text "PLAY" and an empty<span>element, having a class tab.- The following buttons are similar but lack the tab class and have different text:
- LOCKER
- BATTLE PASS
- SHOP
- QUESTS
- V-BUCKS
<div class="play-cont">: A div container with the class play-cont.<h1>LEGO FORTNITE</h1>: A heading with the text "LEGO FORTNITE".<button class="mode play">SELECT WORLD<span></span></button>: A button with the text "SELECT WORLD" and an empty<span>element, having classes mode and play.<button class="play">PLAY<span></span></button>: A button with the text "PLAY" and an empty<span>element, having the class play.
Key Points
- Buttons: Several buttons are defined within two main containers (row and play-cont). Each button contains an empty
<span>element, which could be used for adding icons or additional styling with CSS. - Classes: Buttons and divs use classes (row, tab, play-cont, mode, play) for styling and possibly for JavaScript functionality.
- External CSS: The document links to an external CSS file (styles.css) which will contain the styling rules for the elements.
- Responsive Design: The meta tag for the viewport ensures the page is responsive and adapts to different screen sizes.
Step 2 (CSS Code):
To make our buttons look like those in Fortnite, we need to apply some CSS styles. The styling includes setting up colors, backgrounds, and other visual properties. Here's a breakdown:
@import url('https://fonts.googl...0Sans:800');: This line imports the Google Font "Open Sans" with a weight of 800 (extra bold).
:root: Sets a CSS variable --font to 2rem, which will be used for defining font sizes throughout the document.
body: Styles the body of the webpage. It uses Flexbox to create a column layout with space between elements, aligning items at the start. The body has a background image set with a semi-transparent overlay. The font family is set to "Open Sans", and the margin is set to 0.
.row: Defines a class for a flex container with a row layout, aligning items at the start and with a gap between elements.
button: Styles the buttons. They are displayed as flex containers with row layout, aligning items at the center. Border, font size, border radius, padding, margin, and line height are set. The button has a transparent background with white text color and a box shadow. On hover, the box shadow changes to create a visual effect.
button::before: Adds a pseudo-element to the button. It's positioned absolutely to cover the entire button area. This pseudo-element is styled to create a border animation effect when the button is hovered over.
@keyframes borders: Defines a keyframe animation called "borders" used to animate the border width of the button's pseudo-element.
button:hover::before: Styles the button's pseudo-element when the button is hovered over. It adds a solid border, padding, box-shadow, and a blur effect, along with triggering the border animation defined earlier.
span: Defines a style for a span element. It's positioned absolutely to cover the button and creates a gradient effect.
span::after: Adds a pseudo-element to the span, which creates a gradient overlay that transitions on hover.
.tab: Styles for a specific class "tab", changing the background color and text color.
Extra unique buttons .play-cont, .play, .mode: These styles define additional buttons with unique styling, including size, color, and effects.
h1: Styles for heading elements. Color is set to white, with position relative and italic font style.
@media screen and (max-width: 800px): Media query for screens with a maximum width of 800px. It adjusts the font size and some element dimensions for smaller screens.
@import url('https://fonts.googleapis.com/css?family=Open%20Sans:800');
:root {
--font: 2rem;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
align-items: flex-start;
height: 100vh;
box-sizing: border-box;
padding: 5rem;
background: url('https://www.lego.com/cdn/cs/aboutus/assets/blta2f7045752055c85/JunoEpicNewsroom_Inline_1920x1080_png.png') no-repeat center center fixed;
background-color: rgba(0,0,0,0.3);
background-blend-mode: color;
font-family: 'Open Sans';
margin: 0;
}
.row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: none;
font-family: 'Open Sans';
font-size: var(--font);
border-radius: calc(var(--font) * 0.6);
padding: calc(var(--font) * 0.5);
margin: 0;
line-height: 1;
position: relative;
background-color: transparent;
color: white;
box-shadow: inset 0 0 0 0 rgb(248, 249, 255, 0.5), inset 0 0 0 0 rgb(248, 249, 255, 0.3), 0 0 0 rgb(248, 249, 255, 0.2);
transition: all ease 0.2s;
}
button:hover {
box-shadow: inset 0 0 0 calc(var(--font) * 0.2) rgb(248, 249, 255, 0.5), inset 0 0 calc(var(--font) * 0.2) calc(var(--font) * 0.5) rgb(248, 249, 255, 0.3), 0 0 calc(var(--font) * 0.2) rgb(248, 249, 255, 0.2);
}
button::before {
content: '';
height: 110%;
width: 105%;
position: absolute;
border-radius: calc(var(--font) * 0.8);
background-color: transparent;
}
@keyframes borders {
0%, 100% {border-width: calc(var(--font) * 0.2) calc(var(--font) * 0.1) calc(var(--font) * 0.02) calc(var(--font) * 0.02);}
25% { border-width: calc(var(--font) * 0.1) calc(var(--font) * 0.02) calc(var(--font) * 0.02) calc(var(--font) * 0.2);}
50% { border-width: calc(var(--font) * 0.02) calc(var(--font) * 0.02) calc(var(--font) * 0.2) calc(var(--font) * 0.1);}
75% { border-width: calc(var(--font) * 0.02) calc(var(--font) * 0.2) calc(var(--font) * 0.1) calc(var(--font) * 0.02);}
}
button:hover::before {
border: solid rgb(210, 255, 227, 0.8);
padding: calc(var(--font) * 0.08);
box-shadow: inset 0 0 calc(var(--font) * 0.2) calc(var(--font) * 0.2) rgb(186, 201, 255, 0.3);
filter: blur(calc(var(--font) * 0.06));
animation: borders infinite 2s linear;
opacity: 0.5;
}
span {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
display: flex;
border-radius: calc(var(--font) * 0.6);
z-index: -1;
}
span::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
background: linear-gradient(90deg, rgb(248, 249, 255, 0), rgb(206, 216, 255, 0.6), rgb(248, 249, 255, 0));
opacity: 0;
transform: translateX(-100%);
}
button:hover > span::after {
opacity: 1;
transform: translateX(100%);
transition: all ease 1s;
}
.tab {
background-color: white;
color: black;
}
/* extra unique buttons */
.play-cont {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: fit-content;
border-radius: 1rem;
padding: 1rem;
background-color: rgba(0,0,0, 0.2);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
}
.play {
--font: 3rem;
color: black;
border-radius: 4rem;
height: 12rem;
width: 25rem;
box-shadow: inset 0 0 0 0 rgb(248, 249, 255, 0.5);
border: 1rem solid transparent;
position: relative;
}
.play:hover::before {
opacity: 0.2;
border-radius: 4rem;
}
.play > span {
background-color: rgb(247, 255, 25);
height: 8rem;
width: 21rem;
border-radius: 2rem;
}
.play > span::after {
display: none;
}
.play:hover {
box-shadow: inset 0 0 0 calc(var(--font) * 0.15) rgb(248, 249, 255, 0.6);
}
.mode > span {
background-color: rgb(200, 204, 205);
height: 6rem;
}
.mode {
font-size: 1.5rem;
width: 25rem;
height: 10rem;
top: 2rem;
}
h1 {
color: white;
margin: 0;
position: relative;
top: 1rem;
font-style: italic;
}
@media screen and (max-width: 800px) {
:root {
--font: 1.2rem;
}
body {
padding: 1rem;
}
.play {
--font: 2rem;
width: 20rem;
}
.mode {
width: 20rem;
}
.play > span {
width:16rem;
}
} Final Output:
Conclusion:
Creating Fortnite-style buttons using HTML and CSS is a fun and rewarding way to enhance your web projects. By following the steps outlined in this guide, you can design buttons that are both visually appealing and highly interactive. Whether you're developing a gaming site or just want to incorporate a modern, energetic design element, these buttons are sure to impress. Start experimenting with different styles and animations to make your buttons stand out even more. Happy coding!
Code by: Juxtopposed
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 😊
