---

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Кнопки</title>
<style>
:root{
  --bg:#f3efe6;--ink:#1d1d22;--card:#fff;--brd:#d8d2c4;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#17181c;--ink:#f1efe8;--card:#202228;--brd:#363943}
}
:root[data-theme="dark"]{--bg:#17181c;--ink:#f1efe8;--card:#202228;--brd:#363943}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,"Times New Roman",serif;min-height:100vh;display:grid;place-items:center;padding:24px}
main{width:100%;max-width:520px;display:grid;gap:14px}
h1{font-size:1.4rem;font-weight:600;margin:0 0 6px}
.row{background:var(--card);border:1px solid var(--brd);border-radius:12px;padding:22px;display:flex;justify-content:center}
button{font:600 1rem/1 system-ui,sans-serif;cursor:pointer;border:0;padding:16px 34px;position:relative;transition:transform .25s,box-shadow .25s,background .25s,color .25s}
button:focus-visible{outline:3px solid #2f6fed;outline-offset:3px}

.b1{background:linear-gradient(120deg,#ff5f6d,#ffc371,#ff5f6d);background-size:200% 100%;color:#fff;border-radius:999px;transition:background-position .6s,transform .25s,box-shadow .25s}
.b1:hover{background-position:100% 0;transform:translateY(-4px);box-shadow:0 10px 20px rgba(255,95,109,.4)}
.b1:active{transform:translateY(1px) scale(.95);box-shadow:0 2px 6px rgba(255,95,109,.4)}

.b2{background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:4px;overflow:hidden;z-index:0}
.b2::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .35s;z-index:-1}
.b2:hover{color:var(--bg)}
.b2:hover::before{transform:translateX(0)}
.b2:active{transform:scale(.93) rotate(-1.5deg)}

.b3{background:#e7e3da;color:#333;border-radius:14px;box-shadow:6px 6px 12px #bdb9ae,-6px -6px 12px #fff}
.b3:hover{box-shadow:9px 9px 18px #bdb9ae,-9px -9px 18px #fff;transform:translateY(-2px)}
.b3:active{box-shadow:inset 5px 5px 10px #bdb9ae,inset -5px -5px 10px #fff;transform:translateY(0)}

.b4{background:#ffe14d;color:#111;border:3px solid #111;border-radius:0;box-shadow:6px 6px 0 #111}
.b4:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #111}
.b4:active{transform:translate(6px,6px);box-shadow:0 0 0 #111}

.b5{background:#0b1220;color:#4df3ff;border:1px solid #4df3ff;border-radius:6px;letter-spacing:.08em;text-shadow:0 0 6px #4df3ff;box-shadow:0 0 6px #4df3ff55,inset 0 0 6px #4df3ff33}
.b5:hover{background:#4df3ff;color:#0b1220;text-shadow:none;box-shadow:0 0 24px #4df3ff,0 0 48px #4df3ff88;letter-spacing:.14em}
.b5:active{transform:scale(.94);box-shadow:0 0 10px #4df3ff,inset 0 0 14px #0b122266}

@media (prefers-reduced-motion:reduce){button,button::before{transition:none}}
</style>
</head>
<body>
<main>
<h1>5 стилей кнопок</h1>
<div class="row"><button class="b1">Градиент</button></div>
<div class="row"><button class="b2">Заливка</button></div>
<div class="row"><button class="b3">Неоморфизм</button></div>
<div class="row"><button class="b4">Брутализм</button></div>
<div class="row"><button class="b5">Неон</button></div>
</main>
</body>
</html>