We are hiring

Web Design Tidbits #2: Kippt gradient button

We are developers conference mob programming

In a series of blog posts, we’ll discuss web design’s best practices when it comes to usability, responsiveness and accessibility. We care about great design and we’d love to show you that a little CSS love goes a long way. In this post, I’ll recreate Kippt’s ‘learn more’ button, that should tempt you to go for their pro plan.

Kippt button

Kippt is Jori Lallo (Founder & Tech) and Karri Saarinen (Founder & Design). Backed by Y Combinator (summer 2012), Kippt aims to solve the broken workflow of finding, reading, storing, searching and sharing information on the web, making information workflow and archiving effortless.

I use Kippt on a daily basis and its design never fails to please me. I used Codepen to rebuilt their strikingly clean ‘learn more’ button. Enjoy:

Kippt gradient button in HTML & CSS

Recreating Kippt’s gradient button

Kippt simply gives a class to its ‘learn more’ link, and styles this class in the corresponding style sheet. Using :hover and :active, they define the button’s behavior. And as a little padding never hurt anyone, Kippt gives its button’s copy some space.

Feel free to use my Codepen blurb for your own website! For the next Tidbits edition I’ll look at Google+’ nice and rounded profile pictures.

[{"code":""30 days before Christmas
[{"code":""30 days before Christmas
is my 30 days of happiness"."
is my 30 days of happiness"."
"label":"30 days free trial"
"label":"30 days free trial"
"win":true}
"win":true}
{"code":""I'm up in the sky with joy about this Free Upgrade"."
{"code":""I'm up in the sky with joy about this Free Upgrade"."
"label":"Free Upgrade"
"label":"Free Upgrade"
"win":true}
"win":true}
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
"label":"25% Off Coupon"
"label":"25% Off Coupon"
"win":true}
"win":true}
{"code":""I love Usersnap so much I'm going to wear it"."
{"code":""I love Usersnap so much I'm going to wear it"."
"label":"Usersnap Tshirt"
"label":"Usersnap Tshirt"
"win":true}
"win":true}
{"code":""30 days before Christmas
{"code":""30 days before Christmas
is my 30 days of happiness"."
is my 30 days of happiness"."
"label":"30 days free trial"
"label":"30 days free trial"
"win":true}
"win":true}
{"code":""I'm up in the sky with joy about this Free Upgrade"."
{"code":""I'm up in the sky with joy about this Free Upgrade"."
"label":"Free Upgrade"
"label":"Free Upgrade"
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Not your day!"
"label":"Not your day!"
"win":false}
"win":false}
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
{"code":""25% off for 6 months? Yaaas!" Or simply apply coupon BLACK25 upon check out."
"label":"25% Off Coupon"
"label":"25% Off Coupon"
"win":true}
"win":true}
{"code":""30 days before Christmas
{"code":""30 days before Christmas
is my 30 days of happiness"."
is my 30 days of happiness"."
"label":"30 days free trial"
"label":"30 days free trial"
"win":true}
"win":true}
{"code":""I'm up in the sky with joy about this Free Upgrade"."
{"code":""I'm up in the sky with joy about this Free Upgrade"."
"label":"Free Upgrade"
"label":"Free Upgrade"
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Spin again"
"label":"Spin again"
"win":false}
"win":false}
{"code":""
{"code":""
"label":"Trip to Vienna"
"label":"Trip to Vienna"
"win":false}]
"win":false}]