Web Design Tidbits #2: Kippt gradient button

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.

If you like this article, give it some sharing ❤️

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.

If you like this article, give it some sharing ❤️

Feedback on Responsive Web Design

Usersnap is the easiest way approach
to set up QA for your reponsive web design.

Give it a try!