Como criar um botão de like com CSS e JS

Conteúdo

Como criar um botão de like com CSS e JS

Vamos começar com o HTML e CSS, já deixei pronto para você, como o componente é muito simples, acho que podemos avançar essa parte.

<button class="btn btn-curtir">
  <span class="btn-icone btn--icone-curtir">
    <span class="fa fa-heart"></span>
  </span>
  <span class="btn-icone btn--icone-curtido">
    <span class="fa fa-heart"></span>
  </span>
  <span class="btn-conteudo btn-conteudo--curtido">Curtido</span>
  <span class="btn-conteudo btn-conteudo--curtir">Curtir</span>
</button>

A única coisa que você precisa ficar atento neste tutorial é fazer a instalação do fontawesome sem seu projeto.

npm install --save @fortawesome/fontawesome-free

// Ou da CDN
<link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
/>

Agora vamos para o CSS:

:root {
  --purple: #9920ea;
  --purple-black: #5e1580;
  --white: #fff;
  --gray: #ccc;
}

.btn {
  width: 200px;
  height: 88px;
  outline: 0;
  border: 2px solid var(--gray);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
}

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

.btn-curtir {
  padding: 1.5rem 1.5rem 1.5rem 6rem;
  font-size: 2rem;
  border-radius: 10px;
  background: var(--white);
}

.btn-curtir.curtido {
  background: var(--purple);
  border-color: var(--purple-black);
}

/* Icone do botão */
.btn-icone {
  display: inline-block;
  width: 32px;
  height: 36px;
  position: absolute;
  left: 1.5rem;
  transform: rotate(0deg);
}

/* Cor do icone e pulsar */
.curtido .btn--icone-curtir {
  transform: scale(2);
}

.btn:not(.curtido).btn--icone-curtido {
  transform: scale(-2);
}

.curtido .btn--icone-curtir,
.btn--icone-curtido {
  opacity: 0;
  position: absolute;
}

.btn--icone-curtir,
.curtido .btn--icone-curtido {
  opacity: 1;
  left: 1.5rem;
}

/*-- Conteudo do botão -- */
.btn-conteudo {
  display: inline-block;
}

/* Rotação */
.btn:not(.curtido) .btn-conteudo--curtido {
  transform: translate(110px);
}

.btn:not(.curtido) .btn-conteudo--curtir {
  transform: translate(-99px);
}

.curtido .btn-conteudo--curtir {
  transform: translate(40px);
}

.btn-conteudo--curtido {
  transform: translate(-11px);
}

/* Classes que utilizam propriedades iguais */
.btn,
.btn-curtir,
.btn-icone,
.curtido,
.btn-conteudo,
.btn-conteudo--curtir,
.btn-conteudo--curtir {
  transition: 1.5s;
}

.btn,
.btn:hover.curtido .btn-conteudo,
.btn.curtido:hover .btn-icone {
  color: var(--purple-black);
}

.btn:hover,
.btn:hover .btn-icone {
  color: var(--purple);
}

.curtido .btn--icone-curtir,
.btn--icone-curtido,
.curtido .btn-conteudo {
  color: var(--white);
}

Já deixei as cores em variáveis, caso você queira mudar elas no futuro, fica muito mais fácil.

JavaScript variáveis

Uma variável do JavaScript é como se fosse um tipo de caixa onde podemos guardar informações nele, seja números, textos, objetos e entre outros. Com isso deixa muito mais fácil utilizá-los mais tarde em nossa aplicação.

Precisamos agora guardar nosso botão em uma variável:

const button = document.querySelector(".btn");

Selecionamos o botão que tenha a classe .btn (<button class=”btn”></button>) e guardamos ele na variável button. A palavra document está referenciando o D.O.M, que basicamente é a nossa página HTML.

Agora vamos adicionar classes ao nosso botão quando clicarmos nele, tudo isso via JavaScript.

JavaScript Function

Uma function guardar instruções e funções que iremos reutilizar em nosso código, evitando assim ficar repetindo muita coisa.

Vou mostrar como declarar e usar uma function:

// Lembre-se aqui só estou explicando como cria uma função
// Não iremos usar esse código no tutorial
// Definimos uma function assim
function exemploFunction() {
  // Instruções vem aqui
  console.log("Hello World!");
}
// E finalmente chamamos ela dessa forma
exemploFunction();

Agora precisamos aprender a criar um evento.

JavaScript Events

Para nossa missão, precisamos criar um eventListener, que fica escutando e esperando algo acontecer para ele entrar em ação.

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

Os eventos podem ser click, mouseover e muitos outros. O parâmetro 1 é qual evento nós queremos que ele fique ouvindo, o segundo é qual function ele vai realizar ao ser chamado.Agora que sabemos o que é events e que queremos o evento de click, vamos montar nosso listener.

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

Todas as vezes que nosso button for clicado ele irá realizar a function que colocar e tirar a classe de curtido. Assim realizando as animações e estilos que definimos no CSS.

Conclusão

Aprendemos alguns conceitos importantes montando esse componente de botão bem simples, essa é uma maneira muito boa de estudar JavaScript, pequenos projetos com muitos conceitos.

Agora você consegue montar outros tipos de botões, basta colocar em prática tudo que sabe.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de Angular em nossas postagens ou no Youtube.

Como criar um botão de like com CSS e JS

Como criar um botão de like com CSS e JS

JavaScript variáveis

JavaScript Function

JavaScript Events

Conclusão

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Como criar um botão de like com CSS e JS

Como criar um botão de like com CSS e JS

JavaScript variáveis

JavaScript Function

JavaScript Events

Conclusão

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreiraFront-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Tenha uma carreira
Front-end de Sucesso!