Skip to content

Instantly share code, notes, and snippets.

@eai04191

eai04191/lazer-button.html

Created May 12, 2024 14:38
Show Gist options
  • Save eai04191/00f01ecefbb745fc708b3c1bab8fe6da to your computer and use it in GitHub Desktop.
Save eai04191/00f01ecefbb745fc708b3c1bab8fe6da to your computer and use it in GitHub Desktop.
Download ZIP
Raw
lazer-button.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap"
rel="stylesheet"
/>
<style>
/* たぶんinitial-valueにvariableを使えない */
@property --gradient-from {
syntax: "<color>";
initial-value: hsl(125, 10%, 25%);
inherits: false;
}
@property --gradient-to {
syntax: "<color>";
initial-value: hsl(124, 10%, 30%);
inherits: false;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body > svg {
position: absolute;
height: 0;
width: 0;
}
.toggle {
font-family: "Comfortaa", sans-serif;
display: inline-block;
position: relative;
width: 420px;
height: 64px;
border-radius: var(--button-radius);
filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 1));
--button-normal-bg1: hsl(125, 10%, 25%);
--button-normal-bg-lighter: hsl(124, 10%, 30%);
--button-normal-fg: hsl(0, 0%, 100%);
--button-active-bg1: hsl(199, 49%, 53%);
--button-active-bg-lighter: hsl(200, 100%, 70%);
--button-active-fg: hsl(120, 10%, 10%);
--icon-normal-bg: hsl(124, 10%, 30%);
--icon-normal-fg: hsl(128, 11%, 15%);
--icon-active-bg: hsl(201, 49%, 23%);
--icon-active-fg: hsl(200, 100%, 70%);
--button-radius: 0.7rem;
input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
--transition-duration: 0.12s;
input + .container {
&:before,
.icon,
.icon svg,
.text-container {
transition: var(--transition-duration);
}
& {
transition: --gradient-from var(--transition-duration),
--gradient-to var(--transition-duration);
}
&:before {
--inset: 2px;
content: "";
position: absolute;
inset: var(--inset);
background-color: var(--button-normal-bg1);
border-radius: calc(
var(--button-radius) - var(--inset)
);
}
width: 100%;
height: 100%;
/* --gradient-from: var(--button-normal-bg1);
--gradient-to: var(--button-normal-bg-lighter); */
background: linear-gradient(
to bottom,
var(--gradient-from),
var(--gradient-to)
);
color: var(--button-normal-fg);
user-select: none;
display: flex;
gap: 8px;
padding: 0 0.6rem;
border-radius: var(--button-radius);
> * {
min-width: 0;
}
.icon {
width: 64px;
flex-shrink: 0;
display: grid;
place-items: center;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
svg,
img {
max-width: 64px;
background: var(--icon-normal-bg);
color: var(--icon-normal-fg);
mask-image: url("#icon-mask");
aspect-ratio: 50 / 35;
padding: 4px;
}
}
.text-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--button-normal-bg-lighter);
color: var(--button-normal-fg);
gap: 4px;
border-radius: var(--button-radius);
padding: 0 1.4rem;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.title {
font-weight: 700;
font-size: 1.25rem;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.description {
font-weight: 400;
font-size: 1rem;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}
}
}
input:checked + .container {
&:before {
background-color: var(--button-active-bg1);
}
--gradient-from: var(--button-active-bg1);
--gradient-to: var(--button-active-bg-lighter);
color: var(--button-active-fg);
.icon {
width: 96px;
img,
svg {
color: var(--icon-active-fg);
background-color: var(--icon-active-bg);
}
}
.text-container {
color: var(--button-active-fg);
background-color: var(--button-active-bg-lighter);
}
}
}
</style>
</head>
<body>
<video
controls
loop
autoplay
src="https://media.stellaria.network/media_attachments/files/112/427/383/123/144/624/original/38d6d12d8a7352fb.mp4"
></video>
<br />
<label class="toggle">
<input type="checkbox" role="switch" />
<div class="container">
<div class="icon">
<!-- <img src="https://s2.svgbox.net/hero-solid.svg?ic=cog" /> -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
color=""
>
<path
fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="text-container">
<span class="title">Title</span>
<span class="description"
>Description description description description
description.</span
>
</div>
</div>
</label>
<p>firefoxだとsvgアイコンの大きさがおかしい</p>
<p><s>linear-gradientのtransitionが効いてない</s></p>
<p>@propertyを使ってchromeでは効くようにした</p>
<p>力尽きたためtransitionのeasingを調整していない</p>
<p>transition時の中間色がおかしい気がする</p>
<svg viewBox="0 0 50 35">
<defs>
<mask
id="icon-mask"
maskUnits="objectBoundingBox"
maskContentUnits="objectBoundingBox"
>
<!-- transform: 1 / viewBox -->
<path
fill="white"
d="M8.268 3a6.002 6.002 0 0 1 5.196-3h23.072a6.002 6.002 0 0 1 5.196 3l6.536 11.321a5.997 5.997 0 0 1 0 5.999l-6.536 11.321a6.002 6.002 0 0 1-5.196 3H13.464a6.002 6.002 0 0 1-5.196-3L1.732 20.32a5.997 5.997 0 0 1 0-5.999L8.268 3Z"
transform="scale(0.02 0.0285714286)"
/>
</mask>
</defs>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment