PluginProbe
Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor / 2.0.7
Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor v2.0.7
2.0.13 2.0.12 2.0.11 2.0.10 2.0.9 trunk 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8
blockenberg / blocks / cta-pulsing-button / style.css

style.css in Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor 2.0.7, at blocks/cta-pulsing-button/style.css

368 lines 16.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* =========================================================
2 CTA Pulsing Button — bkbg-pb-*
3 ========================================================= */
4
5 /* ── Custom property defaults (overridden inline per block) */
6 .bkbg-pb-pulse-wrap {
7 --bkbg-pb-pulse-color: rgba(245, 158, 11, 0.55);
8 --bkbg-pb-pulse-speed: 1800ms;
9 --bkbg-pb-pulse-scale: 1.45;
10 }
11
12 /* ── Outer & alignment ──────────────────────────────────── */
13 .bkbg-pb-outer {
14 display: block;
15 box-sizing: border-box;
16 }
17
18 .bkbg-pb-align-wrap {
19 display: block;
20 }
21
22 /* ── Pulse wrapper — positions pseudo-elements ──────────── */
23 .bkbg-pb-pulse-wrap {
24 display: inline-block;
25 position: relative;
26 vertical-align: top;
27 }
28
29 /* ── Shared pseudo-element base ─────────────────────────── */
30 .bkbg-pb-pulse-wrap::before,
31 .bkbg-pb-pulse-wrap::after {
32 content: '';
33 position: absolute;
34 inset: 0;
35 border-radius: var(--bkbg-pb-border-radius, 50px);
36 pointer-events: none;
37 z-index: 0;
38 }
39
40 /* ─── Effect: ring ───────────────────────────────────────────── */
41 .bkbg-pb-pulse--ring::before {
42 border: 2px solid var(--bkbg-pb-pulse-color);
43 animation: bkbg-pb-ring var(--bkbg-pb-pulse-speed) ease-out infinite;
44 }
45
46 .bkbg-pb-pulse--ring.bkbg-pb-pulse--double-rings::after {
47 border: 2px solid var(--bkbg-pb-pulse-color);
48 animation: bkbg-pb-ring var(--bkbg-pb-pulse-speed) ease-out infinite;
49 animation-delay: calc(var(--bkbg-pb-pulse-speed) * -0.5);
50 }
51
52 @keyframes bkbg-pb-ring {
53 0% { transform: scale(1.02); opacity: 0.85; }
54 100% { transform: scale(var(--bkbg-pb-pulse-scale)); opacity: 0; }
55 }
56
57 /* ─── Effect: double-ring ─────────────────────────────────────── */
58 .bkbg-pb-pulse--double-ring::before {
59 border: 2px solid var(--bkbg-pb-pulse-color);
60 animation: bkbg-pb-double-ring var(--bkbg-pb-pulse-speed) ease-out infinite;
61 }
62
63 .bkbg-pb-pulse--double-ring::after {
64 border: 2px solid var(--bkbg-pb-pulse-color);
65 animation: bkbg-pb-double-ring var(--bkbg-pb-pulse-speed) ease-out infinite;
66 animation-delay: calc(var(--bkbg-pb-pulse-speed) * -0.4);
67 }
68
69 @keyframes bkbg-pb-double-ring {
70 0% { transform: scale(1.02); opacity: 0.75; }
71 100% { transform: scale(1.75); opacity: 0; }
72 }
73
74 /* ─── Effect: glow ───────────────────────────────────────────── */
75 .bkbg-pb-pulse--glow .bkbg-pb-btn {
76 animation: bkbg-pb-glow var(--bkbg-pb-pulse-speed) cubic-bezier(0.45, 0, 0.55, 1) infinite;
77 }
78
79 @keyframes bkbg-pb-glow {
80 0%, 100% {
81 box-shadow:
82 0 0 0 0 var(--bkbg-pb-pulse-color),
83 0 0 0 0 var(--bkbg-pb-pulse-color),
84 0 0 0 0 var(--bkbg-pb-pulse-color);
85 }
86 50% {
87 box-shadow:
88 0 0 7px 2px var(--bkbg-pb-pulse-color),
89 0 0 20px 7px var(--bkbg-pb-pulse-color),
90 0 0 44px 16px var(--bkbg-pb-pulse-color);
91 }
92 }
93
94 /* ─── Effect: wave ───────────────────────────────────────────── */
95 .bkbg-pb-pulse--wave::before {
96 background: var(--bkbg-pb-pulse-color);
97 animation: bkbg-pb-wave var(--bkbg-pb-pulse-speed) ease-out infinite;
98 }
99
100 .bkbg-pb-pulse--wave::after {
101 background: var(--bkbg-pb-pulse-color);
102 animation: bkbg-pb-wave var(--bkbg-pb-pulse-speed) ease-out infinite;
103 animation-delay: calc(var(--bkbg-pb-pulse-speed) * -0.5);
104 }
105
106 @keyframes bkbg-pb-wave {
107 0% { transform: scale(1.01); opacity: 0.5; }
108 100% { transform: scale(1.65); opacity: 0; }
109 }
110
111 /* ─── Effect: ripple ──────────────────────────────────────────── */
112 .bkbg-pb-pulse--ripple::before {
113 border: 2px solid var(--bkbg-pb-pulse-color);
114 animation: bkbg-pb-ripple var(--bkbg-pb-pulse-speed) ease-out infinite;
115 }
116
117 .bkbg-pb-pulse--ripple::after {
118 border: 2px solid var(--bkbg-pb-pulse-color);
119 animation: bkbg-pb-ripple var(--bkbg-pb-pulse-speed) ease-out infinite;
120 animation-delay: calc(var(--bkbg-pb-pulse-speed) * -0.33);
121 }
122
123 .bkbg-pb-pulse--ripple .bkbg-pb-btn {
124 animation: bkbg-pb-ripple-shadow var(--bkbg-pb-pulse-speed) ease-out infinite;
125 animation-delay: calc(var(--bkbg-pb-pulse-speed) * -0.66);
126 }
127
128 @keyframes bkbg-pb-ripple {
129 0% { transform: scale(1.02); opacity: 0.7; }
130 100% { transform: scale(var(--bkbg-pb-pulse-scale)); opacity: 0; }
131 }
132
133 @keyframes bkbg-pb-ripple-shadow {
134 0% { box-shadow: 0 0 0 2px var(--bkbg-pb-pulse-color); }
135 100% { box-shadow: 0 0 0 20px transparent; }
136 }
137
138 /* ─── Effect: breath ──────────────────────────────────────────── */
139 .bkbg-pb-pulse--breath .bkbg-pb-btn {
140 animation: bkbg-pb-breath var(--bkbg-pb-pulse-speed) cubic-bezier(0.37, 0, 0.63, 1) infinite;
141 }
142
143 .bkbg-pb-pulse--breath::before {
144 background: var(--bkbg-pb-pulse-color);
145 filter: blur(12px);
146 animation: bkbg-pb-breath-aura var(--bkbg-pb-pulse-speed) cubic-bezier(0.37, 0, 0.63, 1) infinite;
147 }
148
149 @keyframes bkbg-pb-breath {
150 0%, 100% { transform: scale(1); }
151 50% { transform: scale(1.06); }
152 }
153
154 @keyframes bkbg-pb-breath-aura {
155 0%, 100% { transform: scale(0.92); opacity: 0.1; }
156 50% { transform: scale(1.18); opacity: 0.42; }
157 }
158
159 /* ─── Effect: neon ────────────────────────────────────────────── */
160 .bkbg-pb-pulse--neon .bkbg-pb-btn {
161 animation: bkbg-pb-neon var(--bkbg-pb-pulse-speed) linear infinite;
162 }
163
164 @keyframes bkbg-pb-neon {
165 0% { box-shadow: 0 0 4px 1px var(--bkbg-pb-pulse-color), 0 0 16px 4px var(--bkbg-pb-pulse-color), 0 0 38px 8px var(--bkbg-pb-pulse-color); }
166 6% { box-shadow: 0 0 1px 0 var(--bkbg-pb-pulse-color), 0 0 4px 1px var(--bkbg-pb-pulse-color); }
167 10% { box-shadow: 0 0 4px 1px var(--bkbg-pb-pulse-color), 0 0 16px 4px var(--bkbg-pb-pulse-color), 0 0 38px 8px var(--bkbg-pb-pulse-color); }
168 18% { box-shadow: 0 0 1px 0 var(--bkbg-pb-pulse-color), 0 0 3px 1px var(--bkbg-pb-pulse-color); }
169 22% { box-shadow: 0 0 3px 1px var(--bkbg-pb-pulse-color), 0 0 10px 2px var(--bkbg-pb-pulse-color); }
170 48% { box-shadow: 0 0 4px 1px var(--bkbg-pb-pulse-color), 0 0 16px 4px var(--bkbg-pb-pulse-color), 0 0 38px 8px var(--bkbg-pb-pulse-color); }
171 50% { box-shadow: 0 0 2px 0 var(--bkbg-pb-pulse-color), 0 0 6px 2px var(--bkbg-pb-pulse-color); }
172 54% { box-shadow: 0 0 4px 1px var(--bkbg-pb-pulse-color), 0 0 16px 4px var(--bkbg-pb-pulse-color); }
173 100% { box-shadow: 0 0 4px 1px var(--bkbg-pb-pulse-color), 0 0 16px 4px var(--bkbg-pb-pulse-color), 0 0 38px 8px var(--bkbg-pb-pulse-color); }
174 }
175
176 /* ─── Effect: heartbeat ────────────────────────────────────────── */
177 .bkbg-pb-pulse--heartbeat .bkbg-pb-btn {
178 animation: bkbg-pb-heartbeat var(--bkbg-pb-pulse-speed) linear infinite;
179 }
180
181 .bkbg-pb-pulse--heartbeat::before {
182 background: var(--bkbg-pb-pulse-color);
183 animation: bkbg-pb-heartbeat-aura var(--bkbg-pb-pulse-speed) linear infinite;
184 }
185
186 @keyframes bkbg-pb-heartbeat {
187 0% { transform: scale(1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
188 12% { transform: scale(1.13); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
189 24% { transform: scale(1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
190 36% { transform: scale(1.08); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
191 50% { transform: scale(1); animation-timing-function: linear; }
192 100% { transform: scale(1); }
193 }
194
195 @keyframes bkbg-pb-heartbeat-aura {
196 0% { transform: scale(1.02); opacity: 0.38; animation-timing-function: ease-out; }
197 12% { transform: scale(1.28); opacity: 0; animation-timing-function: linear; }
198 24% { transform: scale(1.02); opacity: 0.25; animation-timing-function: ease-out; }
199 36% { transform: scale(1.2); opacity: 0; animation-timing-function: linear; }
200 52% { transform: scale(1.02); opacity: 0; }
201 100% { transform: scale(1.02); opacity: 0; }
202 }
203
204 /* ─── Effect: float ────────────────────────────────────────────── */
205 .bkbg-pb-pulse--float .bkbg-pb-btn {
206 animation: bkbg-pb-float var(--bkbg-pb-pulse-speed) cubic-bezier(0.37, 0, 0.63, 1) infinite;
207 }
208
209 .bkbg-pb-pulse--float::before {
210 inset: auto;
211 bottom: -14px;
212 left: 12%;
213 right: 12%;
214 height: 10px;
215 border-radius: 50%;
216 background: var(--bkbg-pb-pulse-color);
217 filter: blur(9px);
218 animation: bkbg-pb-float-shadow var(--bkbg-pb-pulse-speed) cubic-bezier(0.37, 0, 0.63, 1) infinite;
219 }
220
221 .bkbg-pb-pulse--float::after {
222 display: none;
223 }
224
225 @keyframes bkbg-pb-float {
226 0%, 100% { transform: translateY(0); }
227 50% { transform: translateY(-9px); }
228 }
229
230 @keyframes bkbg-pb-float-shadow {
231 0%, 100% { transform: scaleX(1); opacity: 0.48; }
232 50% { transform: scaleX(0.8); opacity: 0.16; }
233 }
234
235 /* ── The Button / Link ───────────────────────────────────── */
236 .bkbg-pb-btn {
237 position: relative;
238 display: inline-flex;
239 align-items: center;
240 justify-content: center;
241 cursor: pointer;
242 font-family: var(--bkbg-pb-btn-font-family, inherit);
243 font-size: var(--bkbg-pb-btn-font-size-d, var(--bkbg-pb-btn-fs, 17px));
244 font-weight: var(--bkbg-pb-btn-font-weight, var(--bkbg-pb-btn-fw, 700));
245 font-style: var(--bkbg-pb-btn-font-style, normal);
246 text-transform: var(--bkbg-pb-btn-text-transform, var(--bkbg-pb-btn-tt, none));
247 text-decoration: var(--bkbg-pb-btn-text-decoration, none);
248 letter-spacing: var(--bkbg-pb-btn-letter-spacing-d, var(--bkbg-pb-btn-ls, 0.5px));
249 line-height: var(--bkbg-pb-btn-line-height-d, 1.2);
250 word-spacing: var(--bkbg-pb-btn-word-spacing-d, normal);
251 white-space: nowrap;
252 user-select: none;
253 -webkit-user-select: none;
254 outline: none;
255 overflow: visible;
256 z-index: 1;
257 transition: all 0.22s cubic-bezier(.4, 0, .2, 1);
258 }
259
260 .bkbg-pb-btn:focus-visible {
261 outline: 3px solid #005fcc;
262 outline-offset: 3px;
263 }
264
265 /* Hover brightness lift (when no explicit hover bg provided) */
266 .bkbg-pb-btn:hover {
267 filter: brightness(1.08);
268 transform: translateY(-2px);
269 }
270
271 .bkbg-pb-btn:active {
272 transform: translateY(0);
273 filter: brightness(0.95);
274 }
275
276 /* ── Icon ────────────────────────────────────────────────── */
277 .bkbg-pb-icon {
278 display: block;
279 flex-shrink: 0;
280 transition: transform 0.22s cubic-bezier(.4, 0, .2, 1);
281 }
282
283 /* Icon nudge on hover ─ right-side icon moves right */
284 .bkbg-pb-icon-hover:hover .bkbg-pb-icon:last-of-type {
285 transform: translateX(4px);
286 }
287
288 /* Icon nudge on hover ─ left-side icon moves left */
289 .bkbg-pb-icon-hover:hover .bkbg-pb-icon:first-of-type {
290 transform: translateX(-4px);
291 }
292
293 /* ── Label span ──────────────────────────────────────────── */
294 .bkbg-pb-label {
295 display: inline;
296 pointer-events: none;
297 }
298
299 /* ── Badge ────────────────────────────────────────────────── */
300 .bkbg-pb-badge {
301 /* position / colors / size set via inline styles */
302 pointer-events: none;
303 font-family: inherit;
304 }
305
306 /* ── Subtext ──────────────────────────────────────────────── */
307 .bkbg-pb-subtext {
308 display: block;
309 font-family: var(--bkbg-pb-sub-font-family, inherit);
310 font-size: var(--bkbg-pb-sub-font-size-d, var(--bkbg-pb-sub-fs, 12px));
311 font-weight: var(--bkbg-pb-sub-font-weight, normal);
312 font-style: var(--bkbg-pb-sub-font-style, normal);
313 text-transform: var(--bkbg-pb-sub-text-transform, none);
314 text-decoration: var(--bkbg-pb-sub-text-decoration, none);
315 letter-spacing: var(--bkbg-pb-sub-letter-spacing-d, normal);
316 line-height: var(--bkbg-pb-sub-line-height-d, 1.5);
317 word-spacing: var(--bkbg-pb-sub-word-spacing-d, normal);
318 /* color / margin via inline styles */
319 }
320
321 /* ── Typography responsive — tablet ── */
322 @media (max-width: 1024px) {
323 .bkbg-pb-btn { font-size: var(--bkbg-pb-btn-font-size-t, var(--bkbg-pb-btn-font-size-d, var(--bkbg-pb-btn-fs, 17px))); letter-spacing: var(--bkbg-pb-btn-letter-spacing-t, var(--bkbg-pb-btn-letter-spacing-d, var(--bkbg-pb-btn-ls, 0.5px))); line-height: var(--bkbg-pb-btn-line-height-t, var(--bkbg-pb-btn-line-height-d, 1.2)); word-spacing: var(--bkbg-pb-btn-word-spacing-t, var(--bkbg-pb-btn-word-spacing-d, normal)); }
324 .bkbg-pb-subtext { font-size: var(--bkbg-pb-sub-font-size-t, var(--bkbg-pb-sub-font-size-d, var(--bkbg-pb-sub-fs, 12px))); letter-spacing: var(--bkbg-pb-sub-letter-spacing-t, var(--bkbg-pb-sub-letter-spacing-d, normal)); line-height: var(--bkbg-pb-sub-line-height-t, var(--bkbg-pb-sub-line-height-d, 1.5)); word-spacing: var(--bkbg-pb-sub-word-spacing-t, var(--bkbg-pb-sub-word-spacing-d, normal)); }
325 }
326
327 /* ── Typography responsive — mobile ── */
328 @media (max-width: 767px) {
329 .bkbg-pb-btn { font-size: var(--bkbg-pb-btn-font-size-m, var(--bkbg-pb-btn-font-size-t, var(--bkbg-pb-btn-font-size-d, var(--bkbg-pb-btn-fs, 17px)))); letter-spacing: var(--bkbg-pb-btn-letter-spacing-m, var(--bkbg-pb-btn-letter-spacing-t, var(--bkbg-pb-btn-letter-spacing-d, var(--bkbg-pb-btn-ls, 0.5px)))); line-height: var(--bkbg-pb-btn-line-height-m, var(--bkbg-pb-btn-line-height-t, var(--bkbg-pb-btn-line-height-d, 1.2))); word-spacing: var(--bkbg-pb-btn-word-spacing-m, var(--bkbg-pb-btn-word-spacing-t, var(--bkbg-pb-btn-word-spacing-d, normal))); }
330 .bkbg-pb-subtext { font-size: var(--bkbg-pb-sub-font-size-m, var(--bkbg-pb-sub-font-size-t, var(--bkbg-pb-sub-font-size-d, var(--bkbg-pb-sub-fs, 12px)))); letter-spacing: var(--bkbg-pb-sub-letter-spacing-m, var(--bkbg-pb-sub-letter-spacing-t, var(--bkbg-pb-sub-letter-spacing-d, normal))); line-height: var(--bkbg-pb-sub-line-height-m, var(--bkbg-pb-sub-line-height-t, var(--bkbg-pb-sub-line-height-d, 1.5))); word-spacing: var(--bkbg-pb-sub-word-spacing-m, var(--bkbg-pb-sub-word-spacing-t, var(--bkbg-pb-sub-word-spacing-d, normal))); }
331 }
332
333 /* ── Reduced motion ───────────────────────────────────────── */
334 @media (prefers-reduced-motion: reduce) {
335 .bkbg-pb-pulse-wrap::before,
336 .bkbg-pb-pulse-wrap::after,
337 .bkbg-pb-pulse--glow .bkbg-pb-btn,
338 .bkbg-pb-pulse--neon .bkbg-pb-btn,
339 .bkbg-pb-pulse--breath .bkbg-pb-btn,
340 .bkbg-pb-pulse--heartbeat .bkbg-pb-btn,
341 .bkbg-pb-pulse--float .bkbg-pb-btn,
342 .bkbg-pb-pulse--ripple .bkbg-pb-btn {
343 animation: none !important;
344 }
345 }
346
347 .bkbg-pb-pulse-wrap.bkbg-pb-reduced-motion::before,
348 .bkbg-pb-pulse-wrap.bkbg-pb-reduced-motion::after,
349 .bkbg-pb-pulse-wrap.bkbg-pb-reduced-motion .bkbg-pb-btn {
350 animation-play-state: paused !important;
351 }
352
353 /* =========================================================
354 Editor overrides
355 ========================================================= */
356
357 /* Keep RichText inside the button accessible */
358 .editor-styles-wrapper .bkbg-pb-btn {
359 pointer-events: auto;
360 cursor: text;
361 }
362
363 /* Pause pulse animation in editor for performance */
364 .editor-styles-wrapper .bkbg-pb-pulse-wrap::before,
365 .editor-styles-wrapper .bkbg-pb-pulse-wrap::after {
366 animation-play-state: running; /* leave running so authors see the effect */
367 }
368