Pens from Katherine Kato https://codepen.io/kathykato/ en nospam@codepen.io Copyright 2024 2021-04-27T02:10:25-07:00 Style Stage - Comic https://codepen.io/kathykato/pen/wvgNVeJ https://codepen.io/kathykato/pen/wvgNVeJ Katherine Kato

See the Code - See it Full Page - See Details

]]>
Style Stage - Comic 2021-04-27T02:10:25-07:00
Pagination https://codepen.io/kathykato/pen/abBbKxM https://codepen.io/kathykato/pen/abBbKxM Katherine Kato

See the Code - See it Full Page - See Details

Pagination dots with a stretchy button animation on click.

]]>
Pagination 2021-01-30T04:03:48-07:00
Clipped Image Reveal on Hover https://codepen.io/kathykato/pen/pogaOKG https://codepen.io/kathykato/pen/pogaOKG Katherine Kato

See the Code - See it Full Page - See Details

Hover effect using clip-path that reveals an image while following the cursor.

]]>
Clipped Image Reveal on Hover 2020-07-06T04:17:19-07:00
Todo Checkbox https://codepen.io/kathykato/pen/xxGObEp https://codepen.io/kathykato/pen/xxGObEp Katherine Kato

See the Code - See it Full Page - See Details

Todo checkbox with a text fill hover and strikethrough effect when checked.

]]>
Todo Checkbox 2020-02-18T18:41:03-07:00
Poké Ball https://codepen.io/kathykato/pen/RwPrjoJ https://codepen.io/kathykato/pen/RwPrjoJ Katherine Kato

See the Code - See it Full Page - See Details

Recreated the Poké Ball loading animation from Pokémon Sword and Shield with a single HTML element and CSS.

]]>
Poké Ball 2020-02-14T04:53:16-07:00
Hover Text Fill Effects with CSS (clip-path) https://codepen.io/kathykato/pen/VwYgRQg https://codepen.io/kathykato/pen/VwYgRQg Katherine Kato

See the Code - See it Full Page - See Details

]]>
Hover Text Fill Effects with CSS (clip-path) 2020-01-27T04:13:16-07:00
Hover Text Fill Effects with CSS (transform) https://codepen.io/kathykato/pen/JjoebyL https://codepen.io/kathykato/pen/JjoebyL Katherine Kato

See the Code - See it Full Page - See Details

]]>
Hover Text Fill Effects with CSS (transform) 2020-01-27T04:14:15-07:00
Hover Text Fill Effects with CSS (background-clip) https://codepen.io/kathykato/pen/gObBybX https://codepen.io/kathykato/pen/gObBybX Katherine Kato

See the Code - See it Full Page - See Details

]]>
Hover Text Fill Effects with CSS (background-clip) 2020-01-27T04:11:39-07:00
Hover Text Fill Effects with CSS (width/height) https://codepen.io/kathykato/pen/XWJxoEd https://codepen.io/kathykato/pen/XWJxoEd Katherine Kato

See the Code - See it Full Page - See Details

]]>
Hover Text Fill Effects with CSS (width/height) 2020-01-27T04:12:34-07:00
3D Button https://codepen.io/kathykato/pen/gOOjgmP https://codepen.io/kathykato/pen/gOOjgmP Katherine Kato

See the Code - See it Full Page - See Details

Single element 3D button with hover and click effects.

]]>
3D Button 2019-11-11T03:44:31-07:00