How to make chic translucent buttons using only CSS
When it comes to web or graphic design, more often than not, people have widely varying tastes- sometimes clashing even. We will not delve into what is more tasteful or less, but I, for one have always been partial to the simple and chic, translucent buttons that one often comes across in many elegantly designed websites.
In this blog post, I will try to explain how one can create such buttons with minimal coding using just CSS and no other frameworks. Below is a specimen of how the buttons designed by me look like:
So, first things first- we have to construct these buttons using the HTML button tag, and that will be the sole usage of HTML here. All other aspects will be designed using CSS later on. Below is my code for creating these buttons:
Here, as you can see, both these buttons are linked to different pages of my website and have 2 classes each- one mutual, where we will code the design and hover effects and one for the placement of each button. We can also place them using a single class and relative positioning, and I tried that- but the catch was- that it led to the ‘Sign Up’ button shifting a tad but rightwards whenever the cursor hovered on the ‘Login’ button and that was really getting on my nerves, hence the dual classification.
Now, moving on, the HTML file containing my buttons is the index file which is again linked to my main CSS file, so the designing was pretty convenient for me. Before I show you my code for styling, I first wanted to discuss the things to be kept in mind when styling- that way we will form a list of features we want in our design and then style accordingly. So, I request you to scroll up and have a look at the buttons again.
What are the features you notice?
Well, the most prominent ones are the translucent background, white font colour and the rounded corners. The margin, height and width measurements are never static and keep varying for different sections of the page and you will have to adopt the age-old trial and error method to get to your preferred measurements. Also, there is no border. So, how do we get this translucent colour exactly? Do we go through the usual trial and error to find a similar and lighter shade to the background colour that looks translucent in front of it? I don’t even know if that is possible and even if it were, it would honestly take ages to reach at the exact shade. What we will do is pretty simple.
There are mainly 3 ways to put colour/background-colour in CSS. First is by using the names recognised by CSS MDN documentation and supported by all browsers. But this will only amount to about 140 shades and that too very elemental ones- you will almost never get the shade of your choice. The second and my preferred way would be to use the hex code of colours. A ‘#’ symbol precedes the code. The third way is to use the rgb or rgba values. Now, I am pretty sure you all know what rgb stands for. Here we have an addition to that- which is ‘a’ or ‘alpha’. ‘Alpha’ decides the opacity of the colour with 0 being transparent to 1 being opaque. In our design we will just use white colour with our preferred level of opacity and voila! You are done for the day! Well, not if you also wish to put in some hover effects. In that case, read till the end. Here is my code for the design of these buttons:
As you can see, I have used an alpha of value .15, with no borders. There is a border radius of 12px which gives it the rounded corners, and all the hover transitions take .3 seconds to be executed.
Note: If you put your border radius as 50%, you will get a perfect circle as your button.
Now, we must go back and look at all the changes that happen when we hover on the buttons.
And what are the most prominent changes?
Firstly, we no longer have a background colour, the font colour remains the same and we also get a border- but only at the top and bottom of the button. Also, did you notice that the button gets bigger and the letters are spaced more widely here? Now we will look at the code for this transition. The ‘ .class:hover{ }’ syntax allows us to change the properties of any element when hovered upon.
As you can see, the CSS code is simple as can be. We increase the height and width and put letter spacing of 2px. The background colour is changed to transparent and we use only the top and bottom borders, both with thin width and white solid styling. We also set the border radius to 0 to avoid any curling. So, you see this was a way to style elegant buttons using as minimal and understandable code as possible!
Please comment if you have any suggestions or criticisms. Any feedback is appreciated. Happy designing!
