Boutons
.btn-glitch{
–bg: #ff1a00;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 320px;
height: 90px;
background: var(–bg);
color: #fff;
text-decoration: none;
font-family: « Red Hat Display », sans-serif;
font-size: 3rem;
font-weight: 900;
line-height: 1;
overflow: hidden;
transition:
clip-path .45s cubic-bezier(.22,1,.36,1),
transform .3s ease;
/* Forme cassée */
clip-path: polygon(
0 0,
8% 0,
8% 6%,
22% 6%,
22% 0,
38% 0,
38% 6%,
52% 6%,
52% 0,
68% 0,
68% 6%,
82% 6%,
82% 0,
100% 0,
100% 100%,
92% 100%,
92% 94%,
78% 94%,
78% 100%,
62% 100%,
62% 94%,
48% 94%,
48% 100%,
32% 100%,
32% 94%,
18% 94%,
18% 100%,
0 100%
);
}
/* Hover = rectangle propre */
.btn-glitch:hover{
clip-path: polygon(
0 0,
100% 0,
100% 100%,
0 100%
);
}
.btn-glitch span{
position: relative;
z-index: 2;
}
/* léger mouvement smooth */
.btn-glitch:hover{
transform: translateY(-2px);
}
.btn-glitch{
filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.btn-glitch:hover{
transition:
clip-path .55s cubic-bezier(.19,1,.22,1),
transform .3s ease;
}
Participer
.btn-glitch{
–bg: #ff1a00;
–gap: 10px; /* écart des bandes */
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 320px;
height: 90px;
background: var(–bg);
color: #fff;
text-decoration: none;
font-family: « Red Hat Display », sans-serif;
font-size: 3rem;
font-weight: 900;
line-height: 1;
overflow: hidden;
/* animation beaucoup plus smooth */
transition:
clip-path .7s cubic-bezier(.77,0,.175,1),
transform .45s cubic-bezier(.77,0,.175,1);
will-change: clip-path, transform;
/*
VERSION « cassée »
Les bandes sont plus éloignées
*/
clip-path: polygon(
0 0,
7% 0,
7% var(–gap),
21% var(–gap),
21% 0,
39% 0,
39% var(–gap),
53% var(–gap),
53% 0,
71% 0,
71% var(–gap),
85% var(–gap),
85% 0,
100% 0,
100% 100%,
93% 100%,
93% calc(100% – var(–gap)),
79% calc(100% – var(–gap)),
79% 100%,
61% 100%,
61% calc(100% – var(–gap)),
47% calc(100% – var(–gap)),
47% 100%,
29% 100%,
29% calc(100% – var(–gap)),
15% calc(100% – var(–gap)),
15% 100%,
0 100%
);
}
/*
Hover = tout se rejoint
avec sensation « snap »
comme le switch Nintendo
*/
.btn-glitch:hover{
clip-path: polygon(
0 0,
100% 0,
100% 100%,
0 100%
);
transform: translateY(-2px);
}
.btn-glitch span{
position: relative;
z-index: 2;
transition:
transform .7s cubic-bezier(.77,0,.175,1),
letter-spacing .7s cubic-bezier(.77,0,.175,1);
}
/* micro compression du texte pendant le rapprochement */
.btn-glitch:hover span{
transform: scaleX(0.985);
letter-spacing: -0.5px;
}
Participer
.btn-slice{
–bg: #ff1a00;
–offset: 10px;
–speed: .65s;
–ease: cubic-bezier(.77,0,.175,1);
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 340px;
height: 90px;
overflow: hidden;
text-decoration: none;
font-family: « Red Hat Display », sans-serif;
font-size: 3rem;
font-weight: 900;
color: #fff;
}
/* texte */
.btn-slice span{
position: relative;
z-index: 5;
transition:
transform var(–speed) var(–ease),
letter-spacing var(–speed) var(–ease);
}
/* bandes */
.slice{
position: absolute;
inset: 0;
background: var(–bg);
transition:
transform var(–speed) var(–ease);
will-change: transform;
}
/*
Chaque bande = tranche verticale
comme un bouton découpé
*/
.s1{
clip-path: polygon(0 0, 25% 0, 25% 100%, 0 100%);
}
.s2{
clip-path: polygon(25% 0, 50% 0, 50% 100%, 25% 100%);
}
.s3{
clip-path: polygon(50% 0, 75% 0, 75% 100%, 50% 100%);
}
.s4{
clip-path: polygon(75% 0, 100% 0, 100% 100%, 75% 100%);
}
/* ÉTAT NORMAL */
/* bandes hautes montées */
.top.s1{ transform: translateY(calc(var(–offset) * -1)); }
.top.s2{ transform: translateY(var(–offset)); }
.top.s3{ transform: translateY(calc(var(–offset) * -1)); }
.top.s4{ transform: translateY(var(–offset)); }
/* bandes basses descendues */
.bottom.s1{ transform: translateY(var(–offset)); }
.bottom.s2{ transform: translateY(calc(var(–offset) * -1)); }
.bottom.s3{ transform: translateY(var(–offset)); }
.bottom.s4{ transform: translateY(calc(var(–offset) * -1)); }
/* mélange visuel */
.top{
z-index: 1;
}
.bottom{
z-index: 2;
}
/* HOVER = tout se rejoint */
.btn-slice:hover .slice{
transform: translateY(0);
}
/* léger effet premium */
.btn-slice:hover span{
transform: scaleX(.985);
letter-spacing: -0.5px;
}
Participer
.btn-slice{
–bg: #ff1a00;
–offset: 10px;
–speed: .7s;
–ease: cubic-bezier(.77,0,.175,1);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 340px;
height: 90px;
overflow: hidden;
text-decoration: none;
background: var(–bg);
font-family: « Red Hat Display », sans-serif;
font-size: 3rem;
font-weight: 900;
color: #fff;
/*
Forme « cassée »
*/
clip-path: polygon(
0% 0%,
25% var(–offset),
25% calc(100% – var(–offset)),
50% 100%,
50% var(–offset),
75% 0,
75% calc(100% – var(–offset)),
100% 100%,
100% 0%
);
transition:
clip-path var(–speed) var(–ease),
transform .4s ease;
will-change: clip-path;
}
/*
Hover = les bandes se rejoignent
en rectangle parfait
*/
.btn-slice:hover{
clip-path: polygon(
0 0,
100% 0,
100% 100%,
0 100%
);
transform: translateY(-2px);
}
/* texte */
.btn-slice span{
position: relative;
z-index: 2;
transition:
transform var(–speed) var(–ease),
letter-spacing var(–speed) var(–ease);
}
.btn-slice:hover span{
transform: scaleX(.985);
letter-spacing: -0.5px;
}
Participer
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
overflow: hidden;
cursor: pointer;
border-radius: 4px;
}
section > * {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}
section > div {
transform: rotate(90deg);
}
section > div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
section > div:nth-child(2) {
–gt: linear-gradient(black, black);
–n: 100px;
–h: calc(var(–n) – 5px);
background:
var(–gt) top right,
var(–gt) top var(–n) right,
var(–gt) top calc(var(–n) * 2) right,
var(–gt) top calc(var(–n) * 3) right,
var(–gt) top calc(var(–n) * 4) right,
beige;
background-size: 60% var(–h), 90% var(–h), 70% var(–h), 40% var(–h), 10% var(–h);
mix-blend-mode: screen;
background-repeat: no-repeat;
transition: background-size 1s;
}
section:hover > div:nth-child(2) {
background-size: 100% var(–h);
transition: background-size 1s;
}
strong {
height: max-content;
text-align: center;
isolation: isolate;
font-family: ‘bungee shade’;
font-size: 95px;
color: maroon;
}
body {
display: grid;
align-items: center;
justify-items: center;
height: 100vh;
margin: 0;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
@media (max-width:500px){
section {
width: 90vw;
transform: scale(.9);
}
strong{
font-size: calc(12px + 12vw);
}
}
Click Here for Survey
.btn-switch{
–bg:#ff1a00;
–offset:12px;
–speed:.75s;
–ease:cubic-bezier(.77,0,.175,1);
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:340px;
height:90px;
overflow:hidden;
text-decoration:none;
font-family: »Red Hat Display »,sans-serif;
font-size:3rem;
font-weight:900;
color:#fff;
background:transparent;
}
/* TEXTE */
.btn-switch span{
position:relative;
z-index:10;
transition:
transform var(–speed) var(–ease),
letter-spacing var(–speed) var(–ease);
}
/*
========================
BANDES HAUTES
========================
*/
.btn-switch::before,
.btn-switch::after{
content: » »;
position:absolute;
inset:0;
background:var(–bg);
transition:transform var(–speed) var(–ease);
will-change:transform;
}
/*
Bandes impaires
*/
.btn-switch::before{
clip-path:polygon(
0 0,
25% 0,
25% 100%,
0 100%,
50% 0,
75% 0,
75% 100%,
50% 100%
);
transform:translateY(calc(var(–offset) * -1));
}
/*
Bandes paires
*/
.btn-switch::after{
clip-path:polygon(
25% 0,
50% 0,
50% 100%,
25% 100%,
75% 0,
100% 0,
100% 100%,
75% 100%
);
transform:translateY(var(–offset));
}
/*
========================
HOVER
========================
*/
.btn-switch:hover::before,
.btn-switch:hover::after{
transform:translateY(0);
}
.btn-switch:hover span{
transform:scaleX(.985);
letter-spacing:-0.5px;
}
Participer
.wp-block-button__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 36px;
text-decoration: none;
color: #fff;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: transparent;
border: none;
cursor: pointer;
z-index: 0;
overflow: hidden;
}
.wp-block-button__link .slice-bg {
position: absolute;
top: 0;
bottom: 0;
background: #111;
will-change: transform;
transition: transform 0.55s cubic-bezier(0.25, 1, 0.35, 1);
z-index: -1;
}
.wp-block-button__link:hover .slice-bg {
transform: translateY(0) !important;
}
(function(){
const btn = document.querySelector(‘.wp-block-button__link’);
const sliceWidth = 24;
const btnW = btn.offsetWidth;
const numSlices = Math.max(Math.round(btnW / sliceWidth), 1);
const actualW = btnW / numSlices;
const delays = […Array(numSlices).keys()];
for(let i = delays.length-1; i > 0; i–){
const j = Math.floor(Math.random()*(i+1));
[delays[i],delays[j]]=[delays[j],delays[i]];
}
for(let i = 0; i < numSlices; i++){
const div = document.createElement('div');
div.className = 'slice-bg';
div.style.left = (i * actualW) + 'px';
div.style.width = actualW + 'px';
div.style.transform = `translateY(${i % 2 === 0 ? '-10px' : '10px'})`;
div.style.transitionDelay = (delays[i] / numSlices * 0.18) + 's';
btn.appendChild(div);
}
})();
document.addEventListener(‘DOMContentLoaded’, function(){
(function(){
document.querySelectorAll(‘.wp-block-button__link’).forEach(function(btn){
const sliceWidth = 24;
const btnW = btn.offsetWidth;
const numSlices = Math.max(Math.round(btnW / sliceWidth), 1);
const actualW = btnW / numSlices;
const delays = […Array(numSlices).keys()];
for(let i = delays.length-1; i > 0; i–){
const j = Math.floor(Math.random()*(i+1));
[delays[i],delays[j]]=[delays[j],delays[i]];
}
for(let i = 0; i < numSlices; i++){
const div = document.createElement('div');
div.className = 'slice-bg';
div.style.left = (i * actualW) + 'px';
div.style.width = actualW + 'px';
div.style.transform = `translateY(${i % 2 === 0 ? '-10px' : '10px'})`;
div.style.transitionDelay = (delays[i] / numSlices * 0.18) + 's';
btn.appendChild(div);
}
});
})();
});