Buttons are one the most used tags or elements in a HTML document. And with CSS3 combined with your imagination can result in an ocean of beautiful and unique buttons which can make your webpage very interactive too. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability.
Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. In this post, 10 results of creative and awesome buttons are shown which you can directly copy, paste and use.
1. Simple Hover Button
See the Pen Simple Hover by Amit (@amti_cd) on CodePen.
This is a cool and often used button, you can use it with any two beautiful colours of your choice.
2. Night Mode (Dark Mode) Button
See the Pen Night Mode by Amit (@amti_cd) on CodePen.
The popularity of dark mode is increasing day by day, and this button will help you doing that.
3. Rounded Border Button
See the Pen Rounded Border by Amit (@amti_cd) on CodePen.
Little transition can make a user really happy to use it and enjoy your webpage, just by adding a simple line transition: 0.2s ease ; it can make things look so beautiful. We will se more of it below.
4. Gradient Button
See the Pen Gradient Button by Amit (@amti_cd) on CodePen.
Gradient button's are very amazing, and are very easy to code as well. CSS3 gradients let you display smooth transitions between two or more specified colours.
CSS3 defines two types of gradient:
- Linear Gradient ( this is what we used above)
- Radial Gradient (these are defined by their centre).
You can use very cool background images with them.
5. Glowing Button
See the Pen Glowing Buttons by Amit (@amti_cd) on CodePen.
A glowing button is something that will help you catch attention of the user. And glowing button's looks very awesome and are easy to implement.
We just used box-shadow property, mostly CSS3 box-shadow property applies shadow to elements.
6. Filling Up Button
See the Pen Filling up button by Amit (@amti_cd) on CodePen.
Well, you can call it anything, because the important part is not the name but how awesome it looks. A little :hover :after and transition properties from CSS3 can do wonders.
7. Icon Button
See the Pen Message Icon Button by Amit (@amti_cd) on CodePen.
Again you can call it by any name but the important thing is that they are very informative and gives a good user experience. We are doing it with the help of a very interesting CSS3 property i.e., content, It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it’s called a pseudo element because it’s not actually selecting anything that exists on the page but adding something new to the page. You must use them in your web pages.
8. Download Button
See the Pen Download Button by Amit (@amti_cd) on CodePen.
They are used in most of the web pages, the download buttons are very essential these days where the use of technology is so much, the use of android, ios applications have so much increased. Not only this, downloading pdf, documents etc needs a download button. You need a good looking download button for sure. And most probably you would have heard of Font Awesome website, the world's most popular and easiest to use icon set's are available there for free. You must checkout the page. And to use it you just have to copy their link and you are ready to use them. There are animated icons too. Font Awesome is designed to be used with inline elements like <i> or <span>.
9. The Rainbow button (Just hover to see the magic)
See the Pen The rainbow button by Amit (@amti_cd) on CodePen.
The rainbow button are so pleasant to the eyes. They are just awesome and can impress a user quickly. We used CSS keyframes and animation to make it. Well, the keyframes rules specify the animation code. For example you can specify when the style change should happen in percentage or with keywords "from" and "to", from begin 100% and to begin 0%. The animation starts from to i.e. 0% and ends at 100% i.e. from.
10. 3D Button Animation
See the Pen 3D Button Animation by Amit (@amti_cd) on CodePen.
People get excited whenever they see or hear the word "3D" . Well, 3D animations are very fascinating and they look really very awesome.
Adding a little animation to a website can make it eye-popping, and you must use them.
Conclusion:
So, this was a list of some cool buttons created using only CSS3. There is a lot which can be done with CSS3 properties to create really awesome hover effects, 3D effects, animation based buttons. You can come up with a new one using some permutations and combinations with the properties.
Hopefully, one of these will be making your homepage look more awesome.
