That’s not a bad thing. Buttons are an important part of any website owner’s design because they are often the devices that are used as calls to action. Click here! Buy now! Subscribe! Check in! Send! Buttons are the universal symbols to perform an action. So when I wanted to rethink my own buttons, I wanted to revisit my idea from last year about Action Inspires Action and apply it more aggressively to the buttons on my site. I started out wanting to add an action icon to my buttons to help the “clicking this will do something” visual communication . So based on the button inspiration I saw on the That Church Conference website (see my interview with the founder here) and a few other sites that incorporated icons into their buttons.
I decided to add an arrow (or “chevron” to be exact ) to my buttons when you hover over them. Try it below: Red button Delete button See, isn’t that fun? When you mouse over the button, you feel like you’re about to go somewhere. But Dustin, why did you put the arrow on the front/left of the button instead of the right? Doesn’t the right thing make more sense? I’m glad you asked… and don’t call me butt Dustin. Initially, I placed the chevron (or arrow) on the right side of the button. But that can get a bit confusing when you put another button next to it, like on my home page.
Button Scroll Arrow Issue
If the button on the left has an arrow pointing to the button on the right, it can be a bit confusing, as if the left button is telling you to click the right button. For anyone with decision anxiety, this is the stuff of nightmares. So, I decided that it is better to place the chevron on the left side of the button, before the action text. Not only does this get rid of the dueling button issue, it actually Belgium phone number makes more sense. The chevron now points to the action you are about to perform! If this is getting a bit OCD for you, I won’t be offended if you stop reading now. There is nothing better, I promise. The good news is that my company is ready to be hired to bring this level of detail obsession to your next web project.
I also wanted to have some pre-made styles for when I wanted to quickly add a “download” or “buy” button. This is the result: Download Buy now Now, the reason for the more static (non-moving) version is that these buttons represent a more responsive action. In the case of a download, the click of the button would start the file transfer immediately. In the case of a purchase, the payment process would begin. I consider both to be confidential actions as you don’t just want to trust any download link and any purchase link. You want to feel safe in that action. So I decided I wanted these buttons to feel less “flipping” and more stable. And finally, I’ve created one more variation of a button that I’ll use for a very specific and very important call to action.
Pin This I’ve Created
A “pin” class that, when added to a button, will replace the chevron with a Pinterest icon. This is for when I have a large graphic that I want people to be able to easily pin. You can see examples of this in this post and this other post. Tickets active state inputs The first thing I wanted to change about the posts throughout the blog was the color. Since the background color throughout the site is white, posts with the same background color feel washed out. So I decided to give them a low contrast gray so they would stand out clearly against a white background. Also, when an input is active (when you click inside it), there is a 2px border that fades so you can clearly tell where the cursor is if you scroll and return.
Mobile responsive The previous iteration of this design had numerous flaws when it came to smaller screens. Even though I had started out with a mobile-first philosophy, I ended up trying a few different things that didn’t work as well on mobile. And then I just didn’t have time to go back and rework them. Well, I went through and searched for all the problem areas on mobile screens and adjusted accordingly. Font sizes across the board have specific settings that are done at the tablet/mobile level. Margins and spacing are also adjusted slightly to keep the visual rhythm consistent.