Arcade Buttons

Developer
Mario Duarte
Size
3,213 Kb
Views
36,432
  1. Arcade Buttons Previews
  2. Arcade Buttons HTML Codes
  3. Arcade Buttons CSS Codes

How do I make an arcade buttons?

Arcade looking button mixin - feel free to fork/use it and give it a like. . What is a arcade buttons? How do you make a arcade buttons? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

Arcade Buttons Previews
IQ Test

Arcade Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Arcade Buttons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="inner">	<button class="btn btn-1">A</button><br>	<button class="btn btn-2">B</button>	<button class="btn btn-3">C</button><br/>	<button class="btn btn-4">D</button>	</div>
</div>
<div class="content">	<div class="inner">	<h1>Arcade Buttons Mixin</h1>	<p>Simple mixin that generates arcade looking buttons, just pass in the text color, background color, hover text color and how dark should the side be in %.</p>	<p>Feel free to fork/use it on you projects and if you enjoyed it live a like.</p>	<p class="code">@mixin button-arcade($text-color,$background-color,$hover-text-color,$shadow-gradient) {border: none;text-decoration: none;padding: 15px 25px;color: $text-color;border-radius: 50px;background-color: $background-color;display: inline-block;position: relative;box-shadow: 0 8px darken($background-color, $shadow-gradient); &:hover {color: $hover-text-color;box-shadow: 0 6px darken($background-color,$shadow-gradient);top: 2px;} &:active {box-shadow: 0 0px darken($background-color, $shadow-gradient);top: 8px;}	&:focus {outline: 0;}	}</p>	</div>
</div>
</body>
</html>

Arcade Buttons - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Indie+Flower|Oxygen:400,700,300);
html, body { margin: 0; padding: 0; background-color: #eee; font-family: 'helvetica';
}
.container { width: 100%; padding: 10%; box-sizing: border-box;
}
.container .inner { width: 100%; position: relative; min-height: 150px; display: inline-block;
}
.content { width: 100%; max-width: 600px; margin: 0 auto 50px auto;
}
.content .inner { padding: 20px; background-color: white; color: #555;
}
.content .inner h1 { font-weight: normal;
}
.content .inner p.code { color: #999;
}
.btn { font-family: "Indie Flower", cursive; font-weight: bold;
}
.btn.btn-1 { left: calc(50% - 27px); border: none; text-decoration: none; padding: 15px 25px; color: #ffffff; border-radius: 50px; background-color: #e67e22; display: inline-block; position: relative; box-shadow: 0 8px #bf6516;
}
.btn.btn-1:hover { color: #ffffff; box-shadow: 0 6px #bf6516; top: 2px;
}
.btn.btn-1:active { box-shadow: 0 0px #bf6516; top: 8px;
}
.btn.btn-1:focus { outline: 0;
}
.btn.btn-2 { left: calc(50% - 81px); border: none; text-decoration: none; padding: 15px 25px; color: #ffffff; border-radius: 50px; background-color: #3498db; display: inline-block; position: relative; box-shadow: 0 8px #217dbb;
}
.btn.btn-2:hover { color: #ffffff; box-shadow: 0 6px #217dbb; top: 2px;
}
.btn.btn-2:active { box-shadow: 0 0px #217dbb; top: 8px;
}
.btn.btn-2:focus { outline: 0;
}
.btn.btn-3 { left: calc(50% - 48px); border: none; text-decoration: none; padding: 15px 25px; color: #ffffff; border-radius: 50px; background-color: #3498db; display: inline-block; position: relative; box-shadow: 0 8px #217dbb;
}
.btn.btn-3:hover { color: #ffffff; box-shadow: 0 6px #217dbb; top: 2px;
}
.btn.btn-3:active { box-shadow: 0 0px #217dbb; top: 8px;
}
.btn.btn-3:focus { outline: 0;
}
.btn.btn-4 { left: calc(50% - 27px); border: none; text-decoration: none; padding: 15px 25px; color: #ffffff; border-radius: 50px; background-color: #e67e22; display: inline-block; position: relative; box-shadow: 0 8px #bf6516;
}
.btn.btn-4:hover { color: #ffffff; box-shadow: 0 6px #bf6516; top: 2px;
}
.btn.btn-4:active { box-shadow: 0 0px #bf6516; top: 8px;
}
.btn.btn-4:focus { outline: 0;
}
Arcade Buttons - Script Codes
Arcade Buttons - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 3,213 Kb
Views 36,432
Do you need developer help for Arcade Buttons?

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!

Mario Duarte (MarioDesigns) Script Codes
Name
Floating Loading Animation
Carbon Atom Animation
Relative Mouse Position
CSS 3D loading
Floating Animation - CSS
The Dark - CSS animated background
Door Animation
Pure CSS circonferences
Hero Animated Canvas Background
Colour Game
Create amazing art & images 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!