94 lines
2.8 KiB
HTML
94 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - CSS Neon Button maker - with css variables </title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="neons">
|
|
<button contenteditable>Neon Love</button>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
|
|
<div class="controls">
|
|
<header>
|
|
<h3>Controls</h3>
|
|
</header>
|
|
<div>
|
|
<label for="hue">Hue</label>
|
|
<input type="range" min="0" max="360" value="180" step="1" id="hue" oninput="this.nextElementSibling.value = this.value">
|
|
<output>0</output>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="saturation">Saturation</label>
|
|
<input type="range" min="0" max="100" value="50" step="1" id="saturation" oninput="this.nextElementSibling.value = this.value + '%'">
|
|
<output>0%</output>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="light">Light</label>
|
|
<input type="range" min="0" max="100" value="50" step="1" id="light" oninput="this.nextElementSibling.value = this.value + '%'">
|
|
<output>0%</output>
|
|
</div>
|
|
|
|
<div style="display:none" id="grad-section">
|
|
<label for="gradient-light">Gradient Light</label>
|
|
<input type="range" min="0" max="100" value="50" step="1" id="gradient-light" oninput="this.nextElementSibling.value = this.value + '%'">
|
|
<output>0%</output>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="gradient">gradient</label>
|
|
<input type="checkbox" id="gradient">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="animate">animate</label>
|
|
<input type="checkbox" id="animate">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result">
|
|
<pre>
|
|
<code>
|
|
appearance: none;
|
|
border: 0px none rgb(51, 153, 153);
|
|
-webkit-font-smoothing: antialiased;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
letter-spacing: 1.5px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-family: Helvetica;
|
|
|
|
/* Color */
|
|
color: rgb(51, 153, 153);
|
|
text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px, rgba(255, 255, 255, 0.15) 0px 1px 0px;
|
|
|
|
/* Background */
|
|
background: rgba(0, 0, 0, 0) linear-gradient(rgb(64, 191, 191), rgb(57, 172, 172)) repeat scroll 0% 0% / auto padding-box border-box;
|
|
|
|
box-shadow: rgba(68, 193, 193, 0.3) 0px 5px 10px 0px, rgba(68, 193, 193, 0.25) 0px 10px 40px 0px, rgba(68, 193, 193, 0.25) 0px 15px 80px 0px, rgba(0, 0, 0, 0.05) 0px 2px 1px 0px, rgba(0, 0, 0, 0.05) 0px 4px 2px 0px, rgba(0, 0, 0, 0.05) 0px 8px 4px 0px, rgba(0, 0, 0, 0.05) 0px 16px 8px 0px, rgba(0, 0, 0, 0.05) 0px 32px 16px 0px, rgba(0, 0, 0, 0.6) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset;
|
|
|
|
transition: box-shadow 0.2s ease 0s, background 0.2s ease 0s;
|
|
will-change: box-shadow, background;
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|