• Tutoriais

    • Menu com Reflexo

    dezembro 02, 2016 Roberta


    Trouxe alguns modelinhos para um menu com efeito que, ao passar o mouse sobre ele, aparece tipo um reflexo, um brilhinho. Encontrei esse efeito aqui.Basta copiar e colar os códigos onde quiser em seu Layout - Add gadget - HTML/JavaScript:




     <style>
.buttton {
  margin: 10px 0 10px 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.buttton:hover .reflex {
  transform: skewX(20deg) translateX(300px);
  cursor: pointer;
}
/*estilo folha*/
.txt1 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: pink;
  box-shadow: 5px 0px 1px #fea3b3;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}

.txt2 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lavender;
  box-shadow: 5px 0px 1px #cbcbfc;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}


.txt3 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: #c1f2c1;
  box-shadow: 5px 0px 1px #90ee90;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}

.txt4 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lightblue;
  box-shadow: 5px 0px 1px #77bad1;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}
.reflex {
  position: absolute;
  top: 0;
  left: -70px;
  height: 98px;
  width: 50px;
  background: rgba(255, 255, 255, 0.23);
  transition: all .5s linear;
  transform: skewX(20deg) translateX(0);
}
</style>
<div class="buttton">
  <a href='#'><button class="txt1">Link 1</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt2">Link 2</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt3">Link 3</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt4">Link 4</button></a>
  <div class="reflex"></div>
</div> 





     <style>
.buttton {
  margin: 10px 0 10px 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.buttton:hover .reflex {
  transform: skewX(20deg) translateX(300px);
  cursor: pointer;
}
/*estilo redondo*/
.txt5 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: pink;
  box-shadow: 5px 0px 1px #fea3b3;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}


.txt6 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lavender;
  box-shadow: 5px 0px 1px #cbcbfc;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}


.txt7 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: #c1f2c1;
  box-shadow: 5px 0px 1px #90ee90;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}

.txt8 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lightblue;
  box-shadow: 5px 0px 1px #77bad1;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}
.reflex {
  position: absolute;
  top: 0;
  left: -70px;
  height: 98px;
  width: 50px;
  background: rgba(255, 255, 255, 0.23);
  transition: all .5s linear;
  transform: skewX(20deg) translateX(0);
}
</style>
<div class="buttton">
  <a href='#'><button class="txt5">Link 1</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt6">Link 2</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt7">Link 3</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt8">Link 4</button></a>
  <div class="reflex"></div>
</div> 





     <style>
.buttton {
  margin: 10px 0 10px 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.buttton:hover .reflex {
  transform: skewX(20deg) translateX(300px);
  cursor: pointer;
}
/*estilo borda arredondada*/
.txt9 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: pink;
  box-shadow: 5px 0px 1px #fea3b3;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}


.txt10 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lavender;
  box-shadow: 5px 0px 1px #cbcbfc;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}


.txt11 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: #c1f2c1;
  box-shadow: 5px 0px 1px #90ee90;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}

.txt12 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lightblue;
  box-shadow: 5px 0px 1px #77bad1;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}
.reflex {
  position: absolute;
  top: 0;
  left: -70px;
  height: 98px;
  width: 50px;
  background: rgba(255, 255, 255, 0.23);
  transition: all .5s linear;
  transform: skewX(20deg) translateX(0);
}
</style>
<div class="buttton">
  <a href='#'><button class="txt9">Link 1</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt10">Link 2</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt11">Link 3</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt12">Link 4</button></a>
  <div class="reflex"></div>
</div>

    Mude a '#' por links e Link1/2/3/4 pelos títulos/nomes dos links. E conforme vocês podem ver nos códigos, é possível mudar cores (color, backgrounds, box-shadow), tamanhos de fonte (font-size), larguras (width), distâncias de margin e padding, bordas (border, border-radius), a cor do reflexo (rgba(255, 255, 255, 0.23))... e claro, acrescentar muitos outros estilos que preferir.
    Imagem: Pixabay.com



    Talvez vc goste:

    Postar um comentário

    2 Comentários

    1. ☆~Lisa~☆03 dezembro

      Que efeito fofo <3 E o fato de não precisar mexer no HTML é muito bom, sempre fico com medo de causar danos no blog inteiro por causa de um } hahaha ><

      ~Abraços!

      ResponderExcluir

    Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

    Apenas peço que:
    - Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
    - Use um vocabulário livre para todas as idades;
    - Não ofenda ninguém em hipótese alguma.

    Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

    Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
    Facebook - Twitter - Deviantart

    © Copyright , Reino Kawaii. All rights Reserved. | ThemeDaddy Best Blogger Themes

    up