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 |
Google Fonts Sass Mixin | 4,237 Kb |
Synchronise background position with padding | 3,411 Kb |
Social swatchbook | 4,245 Kb |
CSS Dribbble invite request | 9,749 Kb |
Batman login form | 4,731 Kb |
Demo Flexbox 2 | 2,778 Kb |
Items on circle | 3,437 Kb |
Demo Flexbox 1 | 2,388 Kb |
Database CRUD JS Class | 4,236 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 |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 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!