Loading video...

Video Failed to Load

Go Home

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

144,228 subscribers

111,340 views • 1 year ago •via X (Twitter)

ArtsEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 views • 1 year ago

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇
0:10

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

107,091 views • 3 years ago

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog
0:16

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog

Adam Argyle

67,503 views • 3 years ago

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙
0:16

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙

jhey ʕ•ᴥ•ʔ

285,985 views • 6 months ago

A little before and after of my “Complete Order” UI button animation concept ✨
0:11

A little before and after of my “Complete Order” UI button animation concept ✨

Michael Nowak

50,443 views • 2 years ago

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }
0:18

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }

jhey ʕ•ᴥ•ʔ

82,376 views • 2 years ago

Little skeumorphic button experiment using css box-shadow
0:15

Little skeumorphic button experiment using css box-shadow

Petr Knoll

362,819 views • 1 year ago

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }
0:14

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

jhey ʕ•ᴥ•ʔ

59,207 views • 7 months ago

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.
0:12

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.

Haz

288,414 views • 4 months ago

the transition from woman’s world to california gurls is a complete GAG
0:18

the transition from woman’s world to california gurls is a complete GAG

e

20,478 views • 1 year ago

Scenes from Paris last night are ones of complete & utter chaos.
0:11

Scenes from Paris last night are ones of complete & utter chaos.

Concerned Citizen

30,157 views • 1 year ago

⚡️ From the Iraqi-Iranian border: Scenes after the Israeli -American aggression on a site near the Mehran border crossing
0:18

⚡️ From the Iraqi-Iranian border: Scenes after the Israeli -American aggression on a site near the Mehran border crossing

War Monitor

65,273 views • 3 months ago

If you take off the mask, you will see......... mask & suit from FORFUN
0:11

If you take off the mask, you will see......... mask & suit from FORFUN

F_wonder

17,316 views • 1 year ago

More from the border
0:14

More from the border

Mossad Commentary

108,999 views • 1 year ago

Stylized damage mask using ucupaint decal projector to control the gradient
0:16

Stylized damage mask using ucupaint decal projector to control the gradient

passivestar

90,829 views • 1 year ago

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner
0:12

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

CodePen.IO

21,647 views • 9 months ago

Chilling video from Durand line , Chaman border Afghan Taliban & Pakistani army are shelling each other.
0:12

Chilling video from Durand line , Chaman border Afghan Taliban & Pakistani army are shelling each other.

War & Gore

58,799 views • 6 months ago

Indian students from the union territory of J&K cross the Iran border into Armenia.
0:12

Indian students from the union territory of J&K cross the Iran border into Armenia.

Sidhant Sibal

489,301 views • 1 year ago