CSS power button
How do I make an css power button?
Inspired by Piotr Kwiatkowski's work on Dribbble : http://dribbble.com/shots/657699-Power-Button?list=following. Looks pretty accurate, doesn't it ? What a shame (-webkit-)filters are inherited and can't be cancelled, it looked way better with a tiny blur on the inner element. :(. What is a css power button? How do you make a css power button? This script and codes were developed by Hugo Giraudel on 09 August 2022, Tuesday.
CSS power button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS power button</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
html { height: 100%;
}
body { background: #4e5d74; background: linear-gradient(#54647d, #313946); height: 100%;
}
.wrapper { width: 150px; height: 150px; margin: 60px auto; border-radius: 50%; background: #b25244; background: linear-gradient(#b25244, #5e1912); position: relative; cursor: pointer; padding: 20px; box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.13), 0 5px 8px rgba(0, 0, 0, 0.5), 0 10px 10px 4px rgba(0, 0, 0, 0.3);
}
.wrapper:after { content: ""; position: absolute; left: -20px; right: -20px; top: -20px; bottom: -20px; z-index: -2; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.15);
}
.wrapper:before { content: ""; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; z-index: -1; border-radius: inherit; box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.13); -webkit-filter: blur(1px); filter: blur(1px);
}
.inner { position: relative; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#8a2c20, #9e4235); display: block; box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05), 0 2px 5px rgba(255, 255, 255, 0.1);
}
.inner:after { position: absolute; width: 50px; height: 50px; background: white; background: linear-gradient(#eaeceb, #8d8d8d); left: 50%; top: 50%; content: ""; border-radius: inherit; margin: -25px 0 0 -25px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
.inner:before { position: absolute; content: ""; width: 40px; height: 40px; left: 50%; top: 50%; border-radius: inherit; background: inherit; margin: -20px 0 0 -20px; z-index: 2; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), 0 1px 2px white;
}
.inner span { display: block; width: 20px; height: 20px; background: #8f3327; position: absolute; left: 50%; margin-left: -10px; top: 25px; z-index: 3; position: relative;
}
.inner span:before { content: ""; position: absolute; width: 6px; height: 25px; background: linear-gradient(#ffffff, #cbcbcd); border-radius: 10px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); left: 50%; margin-left: -3px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="inner"> <span></span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS power button - Script Codes CSS Codes
* { box-sizing: border-box;
}
html { height: 100%;
}
body { background: #4e5d74; background: linear-gradient(#54647d, #313946); height: 100%;
}
.wrapper { width: 150px; height: 150px; margin: 60px auto; border-radius: 50%; background: #b25244; background: linear-gradient(#b25244, #5e1912); position: relative; cursor: pointer; padding: 20px; box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.13), 0 5px 8px rgba(0, 0, 0, 0.5), 0 10px 10px 4px rgba(0, 0, 0, 0.3);
}
.wrapper:after { content: ""; position: absolute; left: -20px; right: -20px; top: -20px; bottom: -20px; z-index: -2; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.15);
}
.wrapper:before { content: ""; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; z-index: -1; border-radius: inherit; box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.13); -webkit-filter: blur(1px); filter: blur(1px);
}
.inner { position: relative; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#8a2c20, #9e4235); display: block; box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05), 0 2px 5px rgba(255, 255, 255, 0.1);
}
.inner:after { position: absolute; width: 50px; height: 50px; background: white; background: linear-gradient(#eaeceb, #8d8d8d); left: 50%; top: 50%; content: ""; border-radius: inherit; margin: -25px 0 0 -25px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
.inner:before { position: absolute; content: ""; width: 40px; height: 40px; left: 50%; top: 50%; border-radius: inherit; background: inherit; margin: -20px 0 0 -20px; z-index: 2; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), 0 1px 2px white;
}
.inner span { display: block; width: 20px; height: 20px; background: #8f3327; position: absolute; left: 50%; margin-left: -10px; top: 25px; z-index: 3; position: relative;
}
.inner span:before { content: ""; position: absolute; width: 6px; height: 25px; background: linear-gradient(#ffffff, #cbcbcd); border-radius: 10px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); left: 50%; margin-left: -3px;
}
Developer | Hugo Giraudel |
Username | HugoGiraudel |
Uploaded | August 09, 2022 |
Rating | 4.5 |
Size | 3,836 Kb |
Views | 36,432 |
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!
Name | Size |
CSS temperature controler | 4,789 Kb |
Demo Flexbox 3 | 2,822 Kb |
CSS power button | 3,836 Kb |
Demo Flexbox 2 | 2,778 Kb |
Single element CSS character | 11,626 Kb |
Off-canvas navigation | 3,864 Kb |
Items on circle | 3,437 Kb |
A Pen by Hugo Giraudel | 3,061 Kb |
Social swatchbook | 4,245 Kb |
Pure CSS light switch | 4,088 Kb |
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!
Name | Username | Size |
Nice textured background | Hans | 2,659 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Starfield using KineticJS | Asp | 3,512 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Animated css matrix type | NielsOeltjen | 3,484 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!