First Button

Needs ::after and ::before to make its magic happen. Only suitable for a button that's not used on every page as the interaction might get boring after seeing it for 50+ times (but you can say that about any button interaction you get more than 50+ times).

The red is our "Smashing Red" #e53b2c matching our CI very well but it also works with every other color of the palette (like the variant with our second orange from the CI) and can be inverted. Thus we have a very flexible button right here. The version on dark background uses the bright yellow we have in our navigation for the mobile section (before hovering).

Non-supporting browsers have a solid button with :hover, :focus and :active states without any fancy effects whatsover and without the arrow at the right. Everything else is progressive enhancement for modern browsers which support transitions, pseudo-elements and gradients/multiple layers for the background-shorthand in CSS.

Works in combination with Button Three.

Important: The buttons all pass AA in the WCAG 2.0 test for accessibility. The bright yellow one on black passes the test and is perfectly accessible.

Possible Use-Cases:

  • Contact Form Submit
  • Books page, eBooks page, events page, newsletter page
  • Social Media and/or RSS Feed
  • Sign In / Register

Impossible Use-Cases:

  • Read More Button
  • Search Form Submit
  • Pagination

Demo:

Second Button

This is an old-fashioned skeuomorphic button style we are currently using in the shop and on our Books, eBooks and Events pages. It is mostly used as the primary call-to-action in that relation.

This button lacks a connection with our current design as box-shadows and text-shadows and gradients are barely in use and on top we do not use the bright orange in our designs anywhere.

The "Push Down Effect" is getting old very quickly as it's in use on many websites since the late 2000s (the Apple Online Store still does this in a way). The Web 2.0 look doesn't help that. What's good though: people are very used to this kind of pattern thus they might not even bother.

Important: This button-style fails the accessibility test. =(

Possible Use-Cases:

  • Currently used as "Buy" button
  • Contact Form Submit Button

Impossible Use-Cases:

  • Cannot be used on a dark background (opacity on :hover)

Third Button

Very flexible, versatile and also solid button. Works with almost every color and can be inverted for darker backgrounds. Works in every browser you can think of and is progressivly enhanced to make it look even prettier in modern browsers, which support transitions and box-shadows.

Not that anyone would realize in a production environment but clicking it several times in a row reveals the "shutter effect" I created (progressive enhancement).

In combination with the First Button we have a solid foundation of two buttons with a similar appearance but different interaction-patterns.

The blue is our wordpress section blue and the green the one for the coding section. The bright rose color is from the sections navigation for UX Design (before hovering).

Important: The blue variant only passes AA. The green variant is failing the test and thus would be inaccessible for people with bad sight. A reasonable (passing) shade to use would be #3F7A71. The pastel rose on black passes the test.

Possible Use-Cases:

  • Read More Button
  • Search Submit Button
  • Subscribe Button for Newsletter
  • Contact Form Submit
  • Buy Button

Fourth Button

This is our "Read More" button from the Magazine just double in size and set in "Open Sans" instead of "Proxima Nova".

Important: Our "Smashing Blue" fails the accessibility test. =(

Fifth Button

Trello Style Button with a background gradient using different rgba values thus the background-color of the element behind the button is very important.

Doesn't work at all on very dark or on very bright background colors.

Important: The bright version fails accessibility tests in this test-scenario, whereas the dark counterpart passes AA before interaction and AAA on hover.

Sixth Button

Using an <img> element absolutely positioned to a minus value for left and setting the button on overflow: hidden there is nothing special about this button before interaction.

On :hover the image becomes visible by sliding in from the left. On click it rotates by 360 degrees suggesting that something's being processed.

This button passes accessibility tests.

Use-Case

  • Contact Form Submit