Space Game Button

Developer
Veronika
Size
3,321 Kb
Views
22,264
  1. Space Game Button Previews
  2. Space Game Button HTML Codes
  3. Space Game Button CSS Codes

How do I make an space game button?

Button design from: https://robertsspaceindustries.com/. What is a space game button? How do you make a space game button? This script and codes were developed by Veronika on 30 November 2022, Wednesday.

Space Game Button Previews
IQ Test

Space Game Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Space Game Button</title> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="button"> <div class="line-container"> <span class="text">Start</span> <div class="line line--top-left line--thick thick-line--short"></div> <div class="line line--top-right line--thick thick-line--short"></div> <div class="line line--bottom-left line--thick thick-line--long"></div> <div class="line line--bottom-right line--thick thick-line--long"></div> <div class="line line--top line--thin"></div> <div class="line line--bottom line--thin"></div> </div> </div>
</div>
</body>
</html>

Space Game Button - Script Codes CSS Codes

body { background-color: black;
}
.container { max-width: 400px; margin: auto; height: 200px; padding-top: 100px;
}
.button { display: block; text-align: center; border-width: 1px 0px 1px 0; border-style: solid; -o-border-image: linear-gradient(to left, transparent, rgba(224, 132, 0, 0.4), transparent); border-image: -webkit-linear-gradient(right, transparent, rgba(224, 132, 0, 0.4), transparent); border-image: linear-gradient(to left, transparent, rgba(224, 132, 0, 0.4), transparent); border-image-slice: 1; cursor: pointer;
}
.text { text-transform: uppercase; font-family: 'Orbitron', sans-serif; font-size: 1.6em; color: #ffefc7; text-shadow: 0 0 13px rgba(76, 33, 4, 0.79), 0 0 32px rgba(255, 187, 24, 0.6); display: block; margin-bottom: -4px; margin-top: 1px;
}
.line-container { width: 230px; margin: auto; position: relative;
}
.line { position: absolute;
}
.line--thick { width: 6px; background-color: #ffefc7;
}
.line--thin { position: absolute; height: 1px; background: -webkit-linear-gradient(right, rgba(255, 239, 199, 0.8), rgba(224, 132, 0, 0.4), rgba(224, 132, 0, 0.4), rgba(224, 132, 0, 0.4), rgba(255, 239, 199, 0.8)); background: linear-gradient(to left, rgba(255, 239, 199, 0.8), rgba(224, 132, 0, 0.4), rgba(224, 132, 0, 0.4), rgba(224, 132, 0, 0.4), rgba(255, 239, 199, 0.8));
}
.thick-line--short { height: 15px; top: -16px;
}
.thick-line--long { height: 40px; top: -1px;
}
.line--top-right { right: 0; -webkit-transform: skew(45deg); transform: skew(45deg); box-shadow: 0px 0px 13px rgba(226, 97, 11, 0.85), -12px -8px 25px 3px rgba(226, 97, 11, 0.8);
}
.line--top-left { left: 0px; -webkit-transform: skew(-45deg); transform: skew(-45deg); box-shadow: 12px -8px 25px 3px rgba(226, 97, 11, 0.8), 0px 0px 13px rgba(226, 97, 11, 0.85);
}
.line--bottom-right { right: 12px; -webkit-transform: skew(-45deg); transform: skew(-45deg); box-shadow: -12px 3px 22px 3px rgba(226, 97, 11, 0.8), 0px 0px 13px rgba(226, 97, 11, 0.85);
}
.line--bottom-left { left: 12px; -webkit-transform: skew(45deg); transform: skew(45deg); box-shadow: 12px 3px 22px 3px rgba(226, 97, 11, 0.8), 0px 0px 13px rgba(226, 97, 11, 0.85);
}
.line--top { width: 214px; top: -17px; left: 8px; box-shadow: 0px 5px 34px 5px rgba(251, 169, 40, 0.26);
}
.line--bottom { width: 160px; top: 38px; left: 35px; box-shadow: 0px -5px 34px 5px rgba(251, 169, 40, 0.26);
}
.pseudo-class-shadow, .line-container::before, .line-container::after, .line--top-left::before, .line--top-left::after, .line--top-right::before, .line--top-right::after, .line--bottom-right::before, .line--bottom-right::after, .line--bottom-left::before, .line--bottom-left::after { position: absolute; content: ''; display: block; width: 22px;
}
.line-container::before { width: 40px; box-shadow: -20px 10px 45px 4px rgba(251, 169, 40, 0.8);
}
.line-container::after { width: 40px; box-shadow: 207px -12px 45px 4px rgba(251, 169, 40, 0.8);
}
.line--top-left::before { box-shadow: 28px 20px 34px 3px rgba(251, 169, 40, 0.8);
}
.line--top-left::after { box-shadow: 48px 20px 34px 3px rgba(251, 169, 40, 0.8);
}
.line--top-right::before { box-shadow: -48px 20px 34px 3px rgba(251, 169, 40, 0.8);
}
.line--top-right::after { box-shadow: -58px 20px 34px 3px rgba(251, 169, 40, 0.8);
}
.line--bottom-right::before { box-shadow: -42px 9px 44px 5px rgba(251, 169, 40, 0.66);
}
.line--bottom-right::after { box-shadow: -52px 10px 44px 5px rgba(251, 169, 40, 0.66);
}
.line--bottom-left::before { box-shadow: 32px 10px 44px 5px rgba(251, 169, 40, 0.66);
}
.line--bottom-left::after { box-shadow: 42px 10px 44px 5px rgba(251, 169, 40, 0.66);
}
Space Game Button - Script Codes
Space Game Button - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 3,321 Kb
Views 22,264
Do you need developer help for Space Game Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Veronika (ivhed) Script Codes
Name
FreeCodeCamp - Wikipedia Viewer
FreeCodeCamp - Markdown Previewer
FreeCodeCamp - Tic Tac Toe Game
Background blend mode
FreeCodeCamp - Javascript Calculator
FreeCodeCamp - Personal Portfolio
MorphSVG Fruit
CSS Filter Blur
FreeCodeCamp - Twitch.tv
CSS Course - Fixed layout
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!