Floating Action Button Blogger

floating action button blogger


Esse widget é muito util e pode ser utilizado em qualquer parte do Blogger isso não ocupa espaço o mais interessante esta no fato de tomar uma ação para o clique que logo se expande um menu, isso vem sendo utilizado com mais frequência em templates, você pode utilizar a criatividade por exemplo para colocar isso na sua página de contato todos os créditos a sashatran se deseja instalar segue o código abaixo:



HTML

<div class="container">
  <input type="checkbox" id="toggle" />
    <label class="button" for="toggle"></label>
  <nav class="nav">
    <a href="http://sashatran.com" target="_blank">About</a>
    <a href="http://codepen.io/sashatran/pens/public/" target="_blank">Home</a>
    <a href="https://www.linkedin.com/in/sasha-tran-23498989/" target="_blank">Hire Me</a>
        <a href="https://www.youtube.com/channel/UCCATAa8MWoBuH-sR_Jlx29A" target="_blank">Subscribe</a>
  </nav>
  </div>


CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  background: linear-gradient(45deg, #FBE7C5, #F5CAC3);
}

.container, .button, .nav{
  position: absolute;
}

.container {
  margin: auto;
  top: 10%;
  left: 50%;
  margin-left: -20px;
}

#toggle {
  display: none;
}

.button {
  z-index: 999;
  width: 43px;
  height: 43px;
  background: #F28482;
  border-radius: 100%;
  transition: all 0.5s ease-in-out;
  box-shadow: 1px 3px 10px 0 rgba(#000000, 0.3);
  cursor: pointer;
 
  &:before {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #FFF;
    transform: rotate(90deg);
  }
  &:after {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #FFF;
  }
}

.nav {
  transform: translateY(-10%);
  opacity: 0;
  top: 13px;
  left: -50px;
  transition: all 0.5s ease-in-out;
  background: #FFF;
  width: 150px;
  border-radius: 5px;
  transform: translateY(0%);
  box-shadow: 2px 3px 10px 0 rgba(#000000, 0.1);
}

.nav a {
  text-align: center;
  display: block;
  margin: 20px 0;
  color: #F28482;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#toggle:checked ~ .nav {
  opacity: 1;
  transform: translateY(10%);
}

#toggle:checked ~ .button {
  transform: rotate(135deg);
   box-shadow: 0 0 0 0 transparent;
}


Obs: HTML deve ser instalado entre <body> e </body>  e  Css deve ser colocado acima de ]]></b:skin> ou </style>

Click to comment