The world’s 7 coolest buttons that makes your web design shines*
You can not escape the fact that you are using a dozen of different buttons every day in many different environments with all kind of functionalities and formats. And if you think through about it, these CTAs (or the famous Call To Actions Buttons) are the modern technology gatekeepers because every action we take on the web, we pass through them. They can not be taken for granted and they deserve a exclusive post. And today I selected the coolest buttons that I use in my projects or that ones really inspired and surprised me and my users not only but their design but the great experience they offer in a UX perspective.
Do you know a guy who spending some time picking up the crème de la crème — the best of the best — when comes to design and less clicks required, less work for the user as possible and such and such, and yet transforming the complexity into the simplicity? Well, that’s me. One proof about that is my “dark room” of all kind of buttons that I’ve been collecting in my journey as a product designer.
The 7 button’s wonders list
Without further ado, let’s dive right in the list of coolest buttons. I picked both the ones that I created to a certain degree — let’s be honest, almost anything is built from scratch-, and the ones from libraries and other amazing designers out there.
The following list presents not only by how cool or jaw-dropping a button can look, but also considering usability and how great they can be to make users’ life easier.
1. The Carousel Buttons
I am a clairvoyant… let me see your hands so that I can see what you have been doing and what you will be doing. I see that you will swipe left and right one of these cool carousel when select a product, a image or your favorite movies and series with some kind of Google suggestions, won’t you?
The carousel buttons are everywhere and they are a great approach if you want to make the most out of your layout with less stuff around, only highlighting what matters or the option selected by the user. This design belongs to one of my design projects and really makes easy to select multiple side-by-side “swipable” options.
2. The Tab Buttons
Yeah! These guys make a daunting dashboard a playground to play around because it is so intuitive and you can easily navigate to one session to another with no effort.
The downside is that some of these dashboards have the ability to also swipe both sides, but in my perspective and some user’s reviewing, this functionality ends up spoiling the usability because you can easily swipe with no intent very often.
Apart from that, this kind of design pattern is way to go to organize many sessions which group many subcategories. That’s why this grouped tab buttons is in this list of the coolest ones.
3. The Fancy Notification Buttons
Every website got some notification button left on some corner and their main functionality is give you what’s new and matters to you. What about make this button the centerpiece of the place and add some cool interaction with some bell smoothing sound as the final touch?! You thought a cool idea? That’s why this fancy and important button — that makes part of everybody’s daily life — have its place here.
This kind of button takes the skeuomorphism — mimicking real-world objects to the digital screen — a new whole experience. That’s because not only the design is taken into consideration here, but how they sound and how realistic the button can interact with users. it is a old-school approach but if you add these other key interactive elements on it, you have a hot button.
4. The neumorphic buttons
This one is listed in our top 7 buttons because also belongs to the new or “neo” way of skeuomorphism with a blend of good looking, realistic shadows and smoothness that makes a modern web layout shines. They are usually highlighted when pressed though.
You can check the code source of this wonder made by the designer Pali Madra here
5. The Speed Dial Buttons
The buttons inside a “boss button” to provides a minimalist and complete experience at the same time with a package of functionalities inside. This reminds me the Matryoshka dolls or the well-known one-inside-another russian dolls. The speed dial buttons have the same aspect to conceptualize the idea of more with less as the initial non-explored appearance.
The material-ui provides this wonder and you can see their documentation here.
I couldn’t resist and included the medium’s speed dial button story editor while writing this, too. That’s the secret people enjoy writing their stuff here. A great parcel of this enjoyment goes to this cool all-in-one-place speed dial button that improves a lot the writer’s experience with essential tools. It deserves a shout-out for the Medium’s UX and dev team to includes this wonder!
6. The 3D multi perspective buttons
This list would be incomplete if I did not include the 3D buttons team aboard. They make objects cooler and broaden the possibilities of creativity by changing the perspective of how they are presented on the screen.
I came across some cool buttons and one of these which stands out is the lying-down 3D buttons with a fancy effect while hovering over them. And of course if these buttons make something really meaningful inside the page`s context like sharing on social network an interesting article with friends after have finished reading it. Your experience goes to 110% like that!
This design is brought to you by Nour Ibram.
7. The gaming pressing-like effect buttons
The last but not least cool button is the one that stands out especially when pressing them and their playful looks that remind you about some game.
I use this type of button generally when implementing some gamification strategy when you design have to include clickable key buttons and motivate users to explore more because they certainly feel good when pressing your buttons like popping bubbles wrap. Yeah! The way how the button is pressed can relax people.
These are my personal list of cool buttons that I implemented at least once in my web projects. There are many more other cool buttons and the list could go on and on up to the 100 but these 7 are my highest cool type of buttons in my “dark room” gallery.
