When you want to learn JavaScript, where do you start? Well I thought about some easy to build UI components. In this post I will show you to code a custom like button. I will explain how it works so you can build your own.

Enjoy!

HTML & CSS

So let’s start with the HTML & CSS to make our component static. I have created the HTML and CSS for you. But if you want to change it, please go ahead and make your flavor of it.

Liked


Like

We are building everything in a <button> tag like we should do with buttons. I have added some <span> tags for the content and icon of the button for the animations. If we don't do this, the animations won't work.

:root {
--red: rgb(209, 3, 3);
--white: #fff;
--black: #000;
}

.btn {
width: 200px; height: 88px;
outline: 0;
border: 2px solid #ccc;
color: #000;
cursor: pointer;
overflow: hidden;
position: relative;
display:flex;
justify-content: space-between;
box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.05);
transition: 1.5s cubic-bezier(.21,.04,.26,.99);
}

.btn:hover {
box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
border-color: var(--red);
}

.btn-like {
padding: 1.5rem 1.5rem 1.5rem 6rem;
font-size: 2rem;
border-radius: 10px;
background: #fff;
transition: 1.5s cubic-bezier(.21,.04,.26,.99);
}
.btn-like.liked {
background: var(--red);
border-color: var(--red);
}

/*-- Button Icon -- */
.btn-icon {
display: inline-block;
width: 32px;
height: 36px;
position: absolute;
left: 1.5rem;
transition: 1s cubic-bezier(.21,.04,.26,.99);
transform: rotate(0deg)
}
.btn:hover .btn-icon {
color: var(--red);
}
.btn.liked:hover .btn-icon {
color: var(--black);
}
.liked .btn--icon-default {
transform: rotate(-90deg)
}
.btn:not(.liked).btn--icon-liked {
transform: rotate(-90deg)
}
.liked .btn--icon-default,
.btn--icon-liked {
opacity: 0;
color: #fff;
position: absolute;
}
.btn--icon-default,
.liked .btn--icon-liked {
opacity: 1;
left: 1.5rem;
}

/*-- Button Content -- */
.btn-content {
transition: transform 0.1s ease;
display: inline-block;
/* position: absolute;
right: 0; */
}
.liked .btn-content {
color: var(--white);
}
.btn:hover.liked .btn-content {
color: var(--black);
}
.btn:not(.liked) .btn-content--liked {
transform: translate(110px)
}
.btn:not(.liked) .btn-content--default {
transform: translate(-56px)
}
.liked .btn-content--default {
transform: translate(24px)
}

I have used CSS Variable to easily change the colors if you don’t like the ones I have picked. Now that we have created the button component statically, we start with the JavaScript. 😇

Demo

Variables

A JavaScript variable is a memory where we can store information like some strings, numbers, objects, and a lot more. The handy thing about variables is that you can re-use them later on in your JavaScript. Otherwise, you will duplicate a lot of code.

We are going to use a variable to store the information on our button. We do that with a const variable. This type of variable stores information but doesn't allow to change the data type.

const button = document.querySelector('.btn')

The code above stores the information of our <button class="btn"></button> element. With the document property, we get access to the D.O.M., which means all the HTML on our page.

But we want to know when a user is clicking on the button, right? Because when the user does that, we want to add a class to the button liked. With this class, we trigger the CSS with the transition.

Functions

In JavaScript, we have functions. We use them to re-use functionality. Many developers are working according to the D.R.Y. principal. It stands for “Don’t Repeat Yourself”.

Below you can see how a normal function is defined and executed. A function can be anonymous or defined with a function name.

// Function is defined here
function coolFunction() {
console.log('Cool function is called 🚀')
}

// Function is called here
coolFunction();

Events

So we need to create an eventListener. With this, we listen to clicks, scrolls, and so much more.

const button = document.querySelector('.btn')

button.addEventListener('parameter1', 'parameter2')

The addEventListener is a function on every HTML element. This function takes some options, which we call parameters.

On the place where we see 'parameter1', we need to define what kind of events we want to listen to. We see 'parameter2', we need to define a function called every time the event is triggered. We call this a callback in JavaScript.

const button = document.querySelector('.btn')

button.addEventListener('click', function() {})

Functions and parameters

Now we have defined that we want to listen to 'click' events with our event listener. In the second property's callback function, we want to add the class 'liked' to the button. But when the user clicks again, we want to remove the class.

In the JavaScript ClassList API, we have a toggle() method for that. (What is the difference between a function and a method? Check FAQ: 1) When it's called the first time, it will add the class name you have defined in it. The second time it's called, it will remove the class name.

const button = document.querySelector('.btn')

button.addEventListener('click', function() {
button.classList.toggle('liked')
})

In the file our example, you will see that the code is a bit different.

const button = document.querySelector('.btn')

button.addEventListener('click', () => {
button.classList.toggle('liked')
})

Instead of using a normal function() {}, I'm using a () => {} which is called an arrow function.

Since the introduction of the arrow function, I’m a big fan of it. It’s much shorter to write than the normal one. But it’s not always smart to use. Just remember, when we need to use this inside an arrow function, choose a normal function. You can read more about the arrow function on the Mozilla Blog

Finish

I think we have created an excellent button component with a cool click effect. Right now, it’s up to you to add some even cooler effects. Let your creativity flow and build something cool!

When you finished your button, please share the result with a Tweet 😁. You can use this example tweet if you want! 👇

I have created project 1 of the "Learn JavaScript The Easy Way" program. 😁

[ADD LINK HERE] 🔥

Do You Want To Learn #javascript like me? Check the link below and start for free. 🚀

[TODO: LINK]

#html #css #codenewbie #coding #frontend #developer #creativity #learnJavaScript #easyJavascript