Sobre mim

Canceriana nascida em junho de 1991, sempre acreditei que se estamos aqui, é por alguma razão. Acho que todo mundo vem a essa vida com um propósito. E gosto de pensar que o meu propósito é trazer mais amor a quem estiver ao meu redor.

Segue aí! :)
Instagram
Instagram did not return any images.

Segue aí! :)

Tá rolando no twitter!
Estou lendo
Categorias
Publicidade

Tutoriais: Squared button animado!

Tutoriais
6 de agosto de 2015 / By / , , / 2 Comments

tutoriais

Se tem algo que eu adoro fazer, é me aventurar no universo do Front-End. Adoro ficar alterando coisinhas nos meus layouts aqui do wordpress, e também ficar testando códigos novos de menus e efeitos diferentes. Pensando nisso, eu resolvi abrir uma categoria de tutoriais aqui no blog, onde irei compartilhar o que sei, e o que ando estudando com vocês. Além disso, terei a ajuda de dois amigos programadores, para quando eu me aventurar em mares mais profundos. haha

Eaí, quem topa embarcar comigo nessa nova viagem? :)

No tutorial de hoje, irei ensinar um efeito de botão beeeem legal! Vocês podem ver o DEMO (ah, passem o mouse em cima do botão, tá?) aqui! 😀

Nesse tutorial iremos fazer uso de SVG, o Scalabe Vector Graphics, uma extensão de imagens vetoriais, que através da TAG <svg>, permite a manipulação de suas propriedades, como cores ou até criar animações através de Javascripts e CSS. Mais para frente, pretendo postar aqui tutorias de animações em SVG um cadinho mais complexos, para vocês verem como pode ser legal usar essa tag no trabalho de vocês! :)

Bora começar? 😀

Segue abaixo o meu CSS (estilo), comentado (lembrando que todo código CSS deverá ficar entras as tags <style> </style>:

.svg-wrapper {

/* Aqui você altera as posições do botão */

  position: relative;
  top: 50%;
  /* Prefixo para funcionar no safari */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0 auto;
	  
/* O width é a largura do shape do botão (sem o texto) */

  width: 320px;  
}

.shape {

/* O dasharray é um atributo que controla os pontos de contorno do do shape (se você adicionar apenas esse atributo, vai ver que o shape fica pontilhado). */
   stroke-dasharray: 125 510;
  
  /* O dashoffset é um atributo de animação. Ele determina a distancia entre o ponto inicial do stroke e o caminho percorrido até o ponto final. */
   stroke-dashoffset: -300;
  
  /*O stroke-width é uma propriedade que define a espessura da linha, texto ou contorno de um elemento.*/
   stroke-width: 8px;
  
  /* O fill é o preenchimento do elemento */
  fill: transparent;
  
  /*Contorno do elemento (neste caso, a cor)*/
  stroke: #000;
  
  /*Aqui você define o estilo da borda do elemento*/
  border-bottom: 5px solid black;
  
  /* Em -webkit-transition você pode alterar o tempo da animação */
  -webkit-transition:  stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

/* Essa é a classe de texto, sendo assim, qualquer alteração de texto deverá ser feita aqui */
.text {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #000;
  top: -48px;
  position: relative;
}

 /* Essa classe ativa o pseudo elemento :hover que é quando o mouse passar em cima do elemento */
.svg-wrapper:hover .shape {
  stroke-width: 8px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

/*A tag <a> define as propriedades de ancoragem, comumente usadas para linkar diferentes páginas, nesse caso, como a palavra HOME é uma ancora, eu altero a cor e o estilo da escrita por aqui, e não pela tag TEXT (citado acima)*/
a {
  color: #000;
  text-decoration:none;
}

Agora que já finalizamos o CSS que cuida do visual do nosso botão, precisamos determinar aonde ele irá aparecer. Para isso podemos utilizar uma TAG <*div>, que deverá ficar dentro do <*body>  (sem os asteriscos em ambos os casos), segue abaixo o meu código:

<body>
  <div class="svg-wrapper">
    <svg height="60" width="200" xmlns="http://www.w3.org/2000/svg">
      <rect class="shape" height="60" width="200" />	
      <div class="text">
	  <*a href="http://www.giselyfernandes.com.br/home/" target="_blank">HOME
	  <*/div>
    </svg>
  </div>
</body>

Não esqueçam de retirar os asteriscos do código, ok? Coloquei eles apenas para o código aparecer, se eu não tivesse feito isso, o código sumiria :(

Eaí, o que vocês acharam desse primeiro tutorial? Super aceito críticas construtivas aí nos comentários, viu? É sempre bom melhorar! Ah, e me deixem sugestões de tutorias que vocês gostariam de ver por aqui, tá? :)

Obs: Este tutorial foi baseado no tutorial do cssbuttons!

Esse post foi útil para você? Ou por algum motivo, você gostou dele? Então clica aí no coraçãozinho pra me deixar feliz? :)

Muito obrigada por estarem aqui, galerinha! Beijinhos :*

Facebook• Twitter • Instagram • Pinterest • Flickr • Tumblr

Psiu! Você já viu esse post? :)

2 Comments

  1. Gabi Gouveia disse:

    Gisely MUITO obrigada pelo tutorial..já guardei e vou tentar fazer no blog…acho esse efeito super chique, não é?
    Beijocas

    • Oi Gabi,

      Obaa! Que bom que você gostou do tutorial e que vai ser útil para você! Também acho esse efeito muuuuuito bacana! Semana que vem vai ter um bem legal tb! *-*

      Obrigada pela visita, viu? Depois me conta se due certo!

      Beijinhos ♥

Leave a Reply