Jump to content
chuxi

Botão flutuante (igual o messenger)

Recommended Posts

<div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"></button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"></button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"></button> </li> </ul> </div>
body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; }

Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By bobzznnn
      Olá meus amigos, eu não sei onde postar minha dúvida, então vou por aqui pois talvez alguem possa me ajudar.
      É o seguinte, trabalho com sistema de Marketing em Laravel e pra cada usuário tem comissões multiniveis, ou seja
      " Pedro indicou Maria( que neste caso 'Maria' Ficaria em Baixo de 'Pedro'. Até aí tudo bem!) logo após 'Maria' Recrutou outro membro o 'Joaquin'
      ( que neste caso 'Joaquin' Ficaria em Baixo de 'Maria')<-- eu não consigo mostrar este indicado('Joaquin') ao 'Pedro' que está lá em cima.
       
      Exemplo: Suponhamos que eu sou o tal 'Pedro' e este da imagem abaixo é a 'Maria', sendo em baixo dela tem o ' Joaquin'(que n está aparecendo).
      Gostaria de saber alguma forma de como clicar na 'Maria' e aparecer o 'Joaquin'.
       
       

       
      segue meu html:
       
      <table id="example2" class="table table-bordered table-hover"> <thead> <tr> <th>Nome</th> <th>Email</th> <th>Telefone</th> <th>Situação</th> <th>Investimento</th> <th>Graduação</th> </tr> </thead> <tbody> @inject('usuarios', 'App\User') @foreach($usuarios->getIndicados() as $user) <tr> <td><b>{{$user->name}}</b></td> <td>{{$user->email}}</td> <td>{{$user->telefone}}</td> <!-- <td>{{$user->getUserDirection()}}</td> --> <td>{{$user->getStatus()}}</td> <td>{{$user->getPacote()->nome}}</td> <td>{{$user->minhaGraduacao()}}</td> </tr> @endforeach </tbody> </table>  
      Aqui o PHP:
       
      public function getIndicados($id = '') { if ($id == '') { $id = Auth::user()->id; } $reffer = Referrals::where('pai_id', $id)->get(); $users = array(); foreach ($reffer as $key => $r) { $users[$key] = $this->where('id', $r->user_id)->first(); } return $users; } public function getFilhos($id = null, $count = false) { if (!$id) { $id = $this->id; } $reffer = Referrals::where('system_id', $id)->orderBy('direcao', 'ASC')->get(); $users = array(); foreach ($reffer as $key => $r) { $user = $this->where('id', $r->user_id)->first(); $user->direcao = $this->getUserDirection($r->user_id); $users[$key] = $user; } if ($count) { return count($users); } return $users; }  
    • By tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By GabrieldaBahia
      Tenho duas paginas HTMl e o PHP onde estou tratando uns dados XML retornado após a leitura de um arquivo, porém estou com uma duvida besta, preciso pegarum valor que pego do XML e colocar dentro de uma tag html,  já fiz assim e nada </caption> <?php  echo $cnpj ?><caption>
      a pagina PHP está sendo chamada no HMTL pelo require_once.
       
       
      trecho do HTML
       
      <head>     <title>Testes</title> </head> <?php include_once 'load.php'; ?>   <body>   <table> <caption >Ti<?php echo $cnpj ?></caption> <tr> Trecho do PHP   $arq = simplexml_load_file('29190411412201000112650010000000181000000180-nfe.xml') or die("Erro ao carregar arquivo XML");   foreach($arq->NFe->infNFe->children() as $infNFe){ $cnpj = $infNFe->CNPJ;   }
    • By makinh0
      <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0" style="margin-top:10px;">
      <tr>
        <td align="center" bgcolor="<?php echo $background ?>"><table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" style="margin-top:10px;">
          <tr>
            <td width="48%" align="left" bgcolor="#3399FF"><strong>Produto</strong></td>
            <td width="16%" align="center" bgcolor="#3399FF"><strong>Hora</strong></td>
            <td width="19%" align="center" bgcolor="#3399FF"><strong>Mesa</strong></td>
            <td width="9%" align="left" bgcolor="#3399FF"><strong>Garçom</strong></td>
            <td width="8%" align="center" bgcolor="#3399FF"><strong>Ação</strong></td>
             <td width="8%" align="center" bgcolor="#3399FF"><strong>Observações</strong></td>
          </tr>
          <?php 
        $sql = mysql_query("SELECT * FROM tbl_carrinho INNER JOIN garcon ON tbl_carrinho.idGarcon = garcon.idGarcon WHERE destino='1' AND status = '0' ORDER BY id DESC") or die(mysql_error());
        while($ver = mysql_fetch_array($sql)){
          $background = (++$i%2) ? '#FFFFF' : '#F2F2F2';
          $feito = $ver['feito'];
        ?>
          <tr>
            <td bgcolor="<?php echo $background ?>"><?php echo $ver['nome']; ?></td>
            <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['time']; ?></td>
            <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['id_mesa'] ?></td>
            <td bgcolor="<?php echo $background ?>"><?php echo $ver['nomeGarcon'] ?></td>
              <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['id_mesa'] ?></td>
            <td bgcolor="<?php echo $background ?>">
       
       
      Sistema restaurante; gente precisava fazer a tela de observacoes , tipo na tela cozinha aparece produto,hora,mesa,garcom e acao, queria por observacao para a cozinha receber como o cliente quer? alguem tem ideia?obg
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.