My face with a Photoshop cutout filter applied to it


Welcome. Click on an image below to read about the given project.

Back to homepage

See the Pen Button Hover Effects by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

Some button hover styles I developed for past projects.

The demo says most of what's to say about these, but let me expand upon them a little bit anyway.

I've seen a lot of cool button demos on CodePen that have inspired me to test out some slightly unusual patterns myself. The above ones are those I've found most useful.

The first ones are dependent on pseudo-elements to work, which means you'll have IE10 support. Nothing will break in IE9, it'll just look less dazzling since there's no transition and the pseudo-element will just jump from state to state, which means you'll essentially get a plain old boring hover effect.

As for the SVG stroke-drawing effect, this is something I've been playing around with a lot lately. They are rather neat. And the third one in particular works brilliantly well on touch, although it might need some speeding up for that particular purpose.

The third one is a plain highlight button. The only special thing about it (which also apply for the SVG stroke buttons) is that I specified the transition on the hover state only - essentially, the highlight appears when you hover over the button, but it doesn't reappear when you hover away since that would be confusing to the users.

Back to homepage