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 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:
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
: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.