Ir para conteúdo

POWERED BY:

AMANDIANDO

Botão com texto

Por , em Javascript

Recommended Posts

AMANDIANDO    0

AMANDIANDO
Postado

Oi, pessoal!

Estou começando a utilizar javascript e entendendo os códigos. Quero muito utilizar um tipo de botão que é mais ou menos assim como coloquei em anexo.

A primeira imagem é o botão normal, quando colocamos o mouse em cima, sobe a barra escura e aparece a descrição do link.

Eu tenho um vídeo de um em funcionamento, mas não consegui o código dele.

Alguém poderia me ajudar?

 

BOTÃO1.jpgBOTÃO2.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

o que eu faria é usar position:

HTML 

<div class="container">
  <div class="caption">
    <label>CONFIGURAÇÕES</label>
    <p>Describe something here to make sense for user who will go read this text</p>
  </div>
</div>

CSS 

.container {
  width: 230px;
  height: 230px;
  background: purple;
  position: relative;
  overflow: hidden;
}

.caption {
  background: rgba(0,0,0,0.3);
  height: 100%;
  font-size: 18px;
  font-family: arial;
  color: #fff;
  position: absolute;
  bottom: -170px;
  transition: 1s;
}

.caption label {
  display: block;
  margin-bottom: 60px;
}

.caption:hover {
  bottom: 0;
  transition: 1s;
}

link demo: https://jsfiddle.net/wanderval/hczjgpeu/21/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jack Oliveira    1

Jack Oliveira
Postado
4 horas atrás, AMANDIANDO disse:

Oi, pessoal!

Estou começando a utilizar javascript e entendendo os códigos. Quero muito utilizar um tipo de botão que é mais ou menos assim como coloquei em anexo.

A primeira imagem é o botão normal, quando colocamos o mouse em cima, sobe a barra escura e aparece a descrição do link.

Eu tenho um vídeo de um em funcionamento, mas não consegui o código dele.

Alguém poderia me ajudar?

 

BOTÃO1.jpgBOTÃO2.jpg

Ola boa noite

tente desta forma veja se vai funcionar    

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/*CONFIGURAR BUTTON */
.bt {

border:15px solid #fff;

border:15px;

border-radius:5px;

display:inline-block;

cursor:pointer;

font-family:Verdana;

font-weight:20px;

font-size:13px;

padding:10px 10px;

text-decoration:none;

}


.bt-basico {

border-color:#000;

background:linear-gradient(to bottom, #E70DC6 2%, #E70DC6 10%);

box-shadow:inset 0px 1px 0px 0px #000;

color:#fff;

text-shadow:0px 1px 0px #E70DC6;

}    

#i.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}


/*MOSTRAR TEXTO */

#mostrar{
  display: none;
}

#passar_mouse:hover #mostrar{
  display:block;
  }

  </style>
  	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Amaranth:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 

  
  <span class="bt bt-basico active" id="passar_mouse">
  <i class="fa fa-cogs" id="blocktext" aria-hidden="true" style="font-size:48px;color:#FFF"></i><br />Configurações
  <span id="mostrar">Configure sua página nestas opções</span></span>

   Espero ter ajudado

fica com DEUS...

Compartilhar este post

Link para o post
Compartilhar em outros sites

AMANDIANDO    0

AMANDIANDO
Postado
Em 03/08/2019 at 00:37, wanderval disse:

o que eu faria é usar position:

HTML 


<div class="container">
  <div class="caption">
    <label>CONFIGURAÇÕES</label>
    <p>Describe something here to make sense for user who will go read this text</p>
  </div>
</div>

CSS 


.container {
  width: 230px;
  height: 230px;
  background: purple;
  position: relative;
  overflow: hidden;
}

.caption {
  background: rgba(0,0,0,0.3);
  height: 100%;
  font-size: 18px;
  font-family: arial;
  color: #fff;
  position: absolute;
  bottom: -170px;
  transition: 1s;
}

.caption label {
  display: block;
  margin-bottom: 60px;
}

.caption:hover {
  bottom: 0;
  transition: 1s;
}

link demo: https://jsfiddle.net/wanderval/hczjgpeu/21/

 

Funcionou! Muito obrigada!

 

Fiquei com uma dúvida.. A descrição aparece somente quando o mouse passa em cima da palavra "Configurações".. Tem como expandir para que a descrição apareça conforme eu coloque o mouse em qualquer lugar do "quadrado rosa"?

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado
Em 05/08/2019 at 13:32, AMANDIANDO disse:

 

Funcionou! Muito obrigada!

 

Fiquei com uma dúvida.. A descrição aparece somente quando o mouse passa em cima da palavra "Configurações".. Tem como expandir para que a descrição apareça conforme eu coloque o mouse em qualquer lugar do "quadrado rosa"?

 

Lamento pela demora: fui avisado pelo imasters apenas agora da sua duvida

você somente precisa substituir um trecho do css:

  

// ATUAL
/*.caption:hover {
  bottom: 0;
  transition: 1s;
}*/


.container:hover .caption{
  bottom: 0;
  transition: 1s;
}

link:https://jsfiddle.net/vord24f3/2/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Rafael_Ferreira
      Não consigo carregar imagem do captcha no meu formulário
      Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • luiz monteiro
      Evitar que o navegador limpe os campos de input quando a guia perde o foco
      Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • belann
      Navbar no Nextjs
      Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • ILR master
      Fixar div até atingir uma certa altura
      Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito