Buttons on a website are the main action triggers: styling and dynamizing them is very important in your development processes! This is the goal of this article.
You can find the entire tutorial on our Instagram account
Step 1
Firstly, we need to specify where to place our button. We have two possible choices:
- Create a button that redirects a user (using a link)
- Create a button that performs an action (using JavaScript, for example)
We will agree that a button either performs a redirection or an action.
Depending on the type of effect you want to achieve with your button, you will need to choose between three possibilities:
- Create a link and style it as if it were a button (using the
<a></a>tag); - Create a button with the
<button></button>tag; - Create a button with the
<input type="button" />tag (for use in a form).
Before creating a button, it is essential to understand the context in which you will use it. For example, we will not use a button with the <input type="button" /> tag if it is intended to redirect a user. Instead, we will prefer this tag within a form.
To create a button, the first thing we need to do is create a class. This is simply a way for us to make our lives easier by factoring out our code. Indeed, when we want to change the style of our button: a simple change in the class will suffice.
Let’s start by creating a button that redirects a user. To do this, here’s how to create a button with HTML:
<a href="#" class="action-button">
Click me
</a>Note that it is also possible to use the dedicated HTML button tag with button:
<a href="#">
<button class="action-button">
Click me
</button>
</a>Both are exactly identical. The only difference is that with the button tag, we will receive a default style generated by the browser:
Step 2
For this button, let’s use an original font! I suggest using the Pacifico font from the excellent Google Fonts service.
If you don’t know how to use Google Fonts, you can learn to master it perfectly through this video dedicated specifically to it, created by our team.
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');We will place this @import code in our stylesheet.
As a reminder,
@importallows you to integrate the content of one stylesheet into another stylesheet.
Step 3
Now that our customized font is in place, we can move on to creating our .action-button class.
To start, let’s create our selector:
.action-button {
}Let’s begin by adding internal margin (padding), our customized font, and rounded borders:
.action-button {
padding: 10px 40px;
border-radius: 10px;
font-family: 'Pacifico', cursive;
}Let’s add the text-decoration: none property to remove the underline on our button (since in our small example it's a link):
.action-button {
padding: 10px 40px;
border-radius: 10px;
font-family: 'Pacifico', cursive;
/* Adding this new property */
text-decoration: none;
}Finally, let's style our button now. The secret lies in the bottom border of the button, which will allow us to play with effects.
.action-button {
padding: 10px 40px;
border-radius: 10px;
font-family: 'Pacifico', cursive;
text-decoration: none;
/* Here we modify the color and background of our small button */
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
transition: all 0.1s;
-webkit-transition: all 0.1s;
}We will also style our button when it is clicked, using the very famous CSS active event selector:
.action-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}The transform property allows us to transform our button, rotate it, and many other things.
Here, we tell it not to move along the x-axis (horizontal) and to move 5px downward along the y-axis (vertical).
And that’s it! If you want to go even further, it is even possible to create a "neon" style button with CSS or even play with gradients to make rainbow buttons!