Pens from Sarah Rusch https://codepen.io/tirabee/ en nospam@codepen.io Copyright 2024 2017-06-30T22:51:16-07:00 side menu https://codepen.io/tirabee/pen/OgvPZR https://codepen.io/tirabee/pen/OgvPZR Sarah Rusch

See the Code - See it Full Page - See Details

Sample Side Menu

]]>
side menu 2017-06-30T22:51:16-07:00
Gradient Button Animations https://codepen.io/tirabee/pen/pPrVrL https://codepen.io/tirabee/pen/pPrVrL Sarah Rusch

See the Code - See it Full Page - See Details

Animation buttons with background gradients. One button with a simple gradient shift on hover, and another with an infinite animation on hover.

]]>
Gradient Button Animations 2017-05-04T03:27:11-07:00
Gradient button shadows https://codepen.io/tirabee/pen/jmLxLY https://codepen.io/tirabee/pen/jmLxLY Sarah Rusch

See the Code - See it Full Page - See Details

]]>
Gradient button shadows 2017-05-04T03:26:59-07:00
Gradient buttons https://codepen.io/tirabee/pen/gWxzxw https://codepen.io/tirabee/pen/gWxzxw Sarah Rusch

See the Code - See it Full Page - See Details

]]>
Gradient buttons 2017-05-04T03:26:33-07:00
Animated Back Glow https://codepen.io/tirabee/pen/EmvLNO https://codepen.io/tirabee/pen/EmvLNO Sarah Rusch

See the Code - See it Full Page - See Details

Psuedo Element + Background Gradient Animation + Blur = Badass

]]>
Animated Back Glow 2017-05-04T03:16:24-07:00
Gradients - sass lists https://codepen.io/tirabee/pen/WjEJoO https://codepen.io/tirabee/pen/WjEJoO Sarah Rusch

See the Code - See it Full Page - See Details

Inspired by <a href="https://dribbble.com/shots/3399247-Gradients-pack-Freebie-sketch"><img src="https://d13yacurqjgara.cloudfront.net/users/282703/screenshots/3399247/1_playoff_shot_1x.jpg" width="100px" alt="Gradients pack // Freebie .sketch"/></a>

]]>
Gradients - sass lists 2017-05-04T03:15:36-07:00
Animated Gradient Buttons https://codepen.io/tirabee/pen/PmKebz https://codepen.io/tirabee/pen/PmKebz Sarah Rusch

See the Code - See it Full Page - See Details

I wanted to try and create a new kind of button style for my personal webapp. I had an idea of rotating a gradient inside the button. It's probably been done before, but I've not seen it yet so I decided to make this idea into a pen and share it. I created 3 (not so great) styles in this demo. I've only tested in the latest Chrome, IE and Firefox.

]]>
Animated Gradient Buttons 2017-05-04T03:15:22-07:00
CSS Only Icons w/ Hovers (Font-Awesome Friendly) https://codepen.io/tirabee/pen/vmJjOB https://codepen.io/tirabee/pen/vmJjOB Sarah Rusch

See the Code - See it Full Page - See Details

]]>
CSS Only Icons w/ Hovers (Font-Awesome Friendly) 2017-05-04T03:00:25-07:00
Gradient Buttons with Background-Color Change (CSS-only) https://codepen.io/tirabee/pen/BRdroe https://codepen.io/tirabee/pen/BRdroe Sarah Rusch

See the Code - See it Full Page - See Details

Everyone likes Gradients. A selection of Gradient Buttons that change the Background Color when Hovering. The direction can be set in the CSS (see comment or check the JS-Panel for Instruction)

]]>
Gradient Buttons with Background-Color Change (CSS-only) 2017-05-04T01:32:46-07:00
CSS Stitched Border https://codepen.io/tirabee/pen/aWyLxJ https://codepen.io/tirabee/pen/aWyLxJ Sarah Rusch

See the Code - See it Full Page - See Details

]]>
CSS Stitched Border 2017-05-03T21:14:21-07:00