All Posts in Code

29th May 2018 - No Comments!

Creating web buttons that don’t suck.

Web Buttons!

Firstly, I should probably just mention... this isn't a tutorial! But - If you'd like to see one just leave a comment below and I could probably, possibly, maybe make that happen?!

I just wanted to make some creative examples of how I jazz-up a few web buttons.

Firstly, I guess you'd need to know a little about code to probably understand the construction of the following examples! But, for those who don't understand - don't stress! I stressed and once looked at a simple hover-state like it must take as much code to make that button, as it did to send a shuttle into space!!

Trust me, it doesn't!

Lucky for you guys who want to see the code I wrote to make these examples... there's a link to my Codepen profile at the bottom of the post! Look, copy, add, make love, adjust or steal to your hearts content 🙂

Blog image

Adding ease with SCSS.

Once you have your HTML markup for your button - add some CSS jazz using 'ease'! Ease can be used in a variety of ways... best way to see which setting looks best is to experiment with them all.

Here's a pretty tasty example of the different kind of ease you can apply. Click this. Wish I'd of found this link months ago!

Blog image

Create a mood.

Cool as f*ck! We have our transitions. Looks pretty sick right?

Your button may require a little extra spice though??

Lets create a 'mood'! In the example above I just made something that reflected my mood at the time. (It was a great night before - but hangovers suck right!!)

Your website probably doesn't need to look like it's recovering from a hangover... but that would probably explain some of the sites I've seen in the past!??

Anyway, I guess its about context. What the design of the site is like? Placement of the button? Functionality?

Create a 'mood' that compliments those things.

Blog image

Surprise!!

I get bored of using websites sometimes! The same user interactions, the same predictable functions.

So add something a little different! Create surprise. Make the user take a second to appreciate the design (or button in this example). In my opinion, those people who need to 'get there' as fast as possible, with the least amount of distractions, just need to slow the hell down!! So much time, love and attention goes into what we do, it's a shame to think they get over-looked sometimes.

Anyway, enough rambling! Find the link to my Codepen profile below to see how I made these buttons.

 

Link Link Link
Codepen

Don't forget to see examples in my project work
View work