У величайших книг 📗 мало читателей, потому что их чтение требует усилия
.button_style_1 {
position: relative;
overflow: visible;
font-weight: 700;
color: rgba(255,255,255,.98);
text-transform: none;
letter-spacing: .01em;
padding: 1.05em 2em;
/* liquid glass body */
background:
/* soft top gloss */
radial-gradient(120% 95% at 50% -28%, rgba(255,255,255,.90), rgba(255,255,255,0) 62%),
/* gentle blue tint */
linear-gradient(180deg, rgba(128,160,255,.20), rgba(128,160,255,.07)),
/* thickness gradient */
linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10)),
rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.34);
border-radius: 999px;
/* translucency */
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
/* depth (subtle, airy) */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -1px 0 rgba(0,0,0,.18),
0 22px 46px -28px rgba(12,14,18,.55),
0 10px 24px -18px rgba(12,14,18,.36);
text-shadow: 0 1px 0 rgba(0,0,0,.10);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: background 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms;
transition: background 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms;
transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms, -webkit-transform 160ms cubic-bezier(.2,.8,.2,1);
/* --- added --- */
-webkit-animation: pulse-glass 2.1s ease-in-out infinite;
animation: pulse-glass 2.1s ease-in-out infinite;
}
.button_style_1::before {
position: absolute;
z-index: -1;
content: "";
width: 100%;
height: 100%;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: inherit;
/* rim highlight + faint chroma + foundation shadow */
background:
/* 1px inner ring (light top / darker bottom) */
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,0) 44%),
linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,0) 56%),
/* delicate prismatic edge */
conic-gradient(from 210deg, rgba(150,175,255,.18), rgba(255,155,230,.10), rgba(150,175,255,.18));
background-blend-mode: screen, normal, screen;
padding: 1px;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
/* contact shadow under glass (elliptical) */
box-shadow:
0 18px 40px -26px rgba(12,14,18,.62),
0 8px 18px -14px rgba(12,14,18,.36);
-webkit-transform: translate3d(0, .52em, -1em);
transform: translate3d(0, .52em, -1em);
-webkit-transition: box-shadow 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1);
transition: box-shadow 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1);
transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms cubic-bezier(.2,.8,.2,1), -webkit-transform 160ms cubic-bezier(.2,.8,.2,1);
/* --- added --- */
-webkit-animation: pulse-lift 2.1s ease-in-out infinite;
animation: pulse-lift 2.1s ease-in-out infinite;
}
.button_style_1::after {
position: absolute;
content: "";
inset: 0;
border-radius: inherit;
pointer-events: none;
/* specular gloss + frost micrograin + bottom caustic */
background:
radial-gradient(70% 45% at 50% -24%, rgba(255,255,255,.96), rgba(255,255,255,0) 62%),
radial-gradient(180% 65% at 50% 120%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 2px);
mix-blend-mode: screen;
opacity: .94;
-webkit-transition: opacity 160ms cubic-bezier(.2,.8,.2,1);
transition: opacity 160ms cubic-bezier(.2,.8,.2,1);
/* --- added --- */
-webkit-animation: pulse-glint 2.1s ease-in-out infinite;
animation: pulse-glint 2.1s ease-in-out infinite;
}
.button_style_1:hover {
background:
radial-gradient(120% 95% at 50% -28%, rgba(255,255,255,.98), rgba(255,255,255,0) 62%),
linear-gradient(180deg, rgba(128,160,255,.24), rgba(128,160,255,.10)),
linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.14)),
rgba(255,255,255,.11);
border-color: rgba(255,255,255,.46);
-webkit-transform: translate(0, -0.06em);
transform: translate(0, -0.06em);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -1px 0 rgba(0,0,0,.18),
0 28px 52px -30px rgba(12,14,18,.66),
0 14px 30px -20px rgba(12,14,18,.40);
/* --- added --- */
-webkit-animation: none;
animation: none;
}
.button_style_1:hover::before {
-webkit-transform: translate3d(0, .38em, -1em);
transform: translate3d(0, .38em, -1em);
box-shadow:
0 22px 48px -30px rgba(12,14,18,.68),
0 10px 22px -16px rgba(12,14,18,.40);
/* --- added --- */
-webkit-animation: none;
animation: none;
}
.button_style_1:hover::after {
opacity: 1;
/* --- added --- */
-webkit-animation: none;
animation: none;
}
.button_style_1:active {
background:
radial-gradient(120% 95% at 50% -28%, rgba(255,255,255,.78), rgba(255,255,255,0) 62%),
linear-gradient(180deg, rgba(128,160,255,.16), rgba(128,160,255,.08)),
linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12)),
rgba(255,255,255,.10);
-webkit-transform: translate(0, .08em) scale(.995);
transform: translate(0, .08em) scale(.995);
box-shadow:
inset 0 2px 6px rgba(0,0,0,.30),
inset 0 -1px 0 rgba(255,255,255,.16),
0 16px 28px -22px rgba(12,14,18,.58);
/* --- added --- */
-webkit-animation: none;
animation: none;
}
.button_style_1:active::before {
-webkit-transform: translate3d(0, .18em, -1em);
transform: translate3d(0, .18em, -1em);
box-shadow:
0 12px 22px -18px rgba(12,14,18,.56),
0 6px 14px -12px rgba(12,14,18,.36);
/* --- added --- */
-webkit-animation: none;
animation: none;
}
/* --- added keyframes --- */
@-webkit-keyframes pulse-glass {
0% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -1px 0 rgba(0,0,0,.18),
0 22px 46px -28px rgba(12,14,18,.55),
0 10px 24px -18px rgba(12,14,18,.36),
0 0 0 0 rgba(128,160,255,.35);
}
70% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -1px 0 rgba(0,0,0,.18),
0 22px 46px -28px rgba(12,14,18,.58),
0 10px 24px -18px rgba(12,14,18,.40),
0 0 0 14px rgba(128,160,255,0);
}
100% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -1px 0 rgba(0,0,0,.18),
0 22px 46px -28px rgba(12,14,18,.55),
0 10px 24px -18px rgba(12,14,18,.36),
0 0 0 0 rgba(128,160,255,0);
}
}
@keyframes pulse-glass {
0% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -1px 0 rgba(0,0,0,.18),
0 22px 46px -28px rgba(12,14,18,.55),
0 10px 24px -18px rgba(12,14,18,.36),
0 0 0 0 rgba(128,160,255,.35);
}
70% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -1px 0 rgba(0,0,0,.18),
0 22px 46px -28px rgba(12,14,18,.58),
0 10px 24px -18px rgba(12,14,18,.40),
0 0 0 14px rgba(128,160,255,0);
}
100% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -1px 0 rgba(0,0,0,.18),
0 22px 46px -28px rgba(12,14,18,.55),
0 10px 24px -18px rgba(12,14,18,.36),
0 0 0 0 rgba(128,160,255,0);
}
}
@-webkit-keyframes pulse-lift {
0%, 100% { -webkit-transform: translate3d(0, .52em, -1em); transform: translate3d(0, .52em, -1em); }
50% { -webkit-transform: translate3d(0, .48em, -1em); transform: translate3d(0, .48em, -1em); }
}
@keyframes pulse-lift {
0%, 100% { -webkit-transform: translate3d(0, .52em, -1em); transform: translate3d(0, .52em, -1em); }
50% { -webkit-transform: translate3d(0, .48em, -1em); transform: translate3d(0, .48em, -1em); }
}
@-webkit-keyframes pulse-glint {
0%, 100% { opacity: .94; }
50% { opacity: 1; }
}
@keyframes pulse-glint {
0%, 100% { opacity: .94; }
50% { opacity: 1; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.button_style_1,
.button_style_1::before,
.button_style_1::after {
-webkit-animation: none !important;
animation: none !important;
}
}