コピペで簡単！ホバーで光が回る「ネオンカード」の作り方。おしゃれなWebデザインに！

<div class="kumonosu-visual-base">
  <!-- 4層のネオンレイヤー -->
  <div class="kumonosu-effect-shell kumonosu-layer-aura">
  </div>
  <div class="kumonosu-effect-shell kumonosu-layer-deep">
  </div>
  <div class="kumonosu-effect-shell kumonosu-layer-vivid">
  </div>
  <div class="kumonosu-effect-shell kumonosu-layer-main">
  </div>
  <!-- メインのブロック要素 -->
  <div class="kumonosu-core-block">KUMONOSU BLOCK</div>
  <!-- 左上の光のアクセント -->
  <div class="kumonosu-accent-dot">
  </div>
</div>

:root {
	--kumonosu-spin-speed: 4s;
	--kumonosu-card-width: 301px;
	--kumonosu-card-height: 56px;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0a0a0b;
	font-family: 'Inter', system-ui, sans-serif;
	overflow: hidden;
}

/* 外側のコンテナ */
.kumonosu-visual-base {
	position: relative;
	width: 314px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 内部のメインブロック */
.kumonosu-core-block {
	width: var(--kumonosu-card-width);
	height: var(--kumonosu-card-height);
	background: linear-gradient(135deg, #010201 0%, #0a0509 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	position: relative;
	z-index: 5;
	cursor: pointer;
	border: none;
}

/* --- ここから最初のコードの光り方を再現 --- */

.kumonosu-effect-shell {
	position: absolute;
	border-radius: 12px;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

/* レイヤーを回転させる共通設定 */
.kumonosu-effect-shell::after {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	animation: kumonosu-spin-anim var(--kumonosu-spin-speed) linear infinite;
	/* 初期状態は停止 */
	animation-play-state: paused;
}

/* ホバー時にすべてのアニメーションを開始 */
.kumonosu-visual-base:hover .kumonosu-effect-shell::after {
	animation-play-state: running;
}

/* 層 1: 外側の大きなぼかし (outer-glow相当) */
.kumonosu-layer-aura {
	width: 354px;
	height: 130px;
	filter: blur(32px);
	opacity: 0.6;
}

.kumonosu-layer-aura::after {
	background: conic-gradient(from 60deg at 50% 50%,
			transparent 0deg, #4d3fd0 15deg, transparent 145deg,
			transparent 180deg, #e830ba 215deg, transparent 325deg);
}

/* 層 2: 深い色のエッジ (dark-layer相当) */
.kumonosu-layer-deep {
	width: 312px;
	height: 65px;
	filter: blur(2.5px);
}

.kumonosu-layer-deep::after {
	background: conic-gradient(from 82deg at 50% 50%,
			transparent 0deg, #2018a0 25deg, transparent 75deg,
			transparent 180deg, #8d2580 205deg, transparent 255deg);
}

/* 層 3: 明るいハイライト (bright-layer相当) */
.kumonosu-layer-vivid {
	width: 307px;
	height: 63px;
	filter: blur(1.8px) brightness(1.6);
}

.kumonosu-layer-vivid::after {
	background: conic-gradient(from 83deg at 50% 50%,
			transparent 0deg, #b5a5e8 20deg, transparent 60deg,
			transparent 180deg, #f0b0e5 200deg, transparent 240deg);
}

/* 層 4: メインの境界線 (primary-border相当) */
.kumonosu-layer-main {
	width: 303px;
	height: 59px;
	filter: blur(0.4px) brightness(1.5);
}

.kumonosu-layer-main::after {
	background: conic-gradient(from 70deg at 50% 50%,
			transparent 0deg, #5040d5 20deg, transparent 80deg,
			transparent 180deg, #e540c0 210deg, transparent 270deg);
	animation-delay: 0.15s;
}

/* 装飾的なピンクのヒント */
.kumonosu-accent-dot {
	position: absolute;
	width: 30px;
	height: 20px;
	background: radial-gradient(circle, #cf30aa 0%, transparent 70%);
	top: 18px;
	left: 20px;
	filter: blur(18px);
	opacity: 0.75;
	z-index: 4;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.kumonosu-visual-base:hover .kumonosu-accent-dot {
	opacity: 0;
}

@keyframes kumonosu-spin-anim {
	to {
		transform: rotate(360deg);
	}
}