Jump to content
AMANDIANDO

Botão com texto

Recommended Posts

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

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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"?

Share this post


Link to post
Share on other sites
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/

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 Jack Oliveira
      Ola boa noite
       
      Galera preciso de uma ajuda de vocês aqui..
       
      Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca
      que não é o meu objetivo..
       
      e deixa apenas a imagem de fundo transparente e negra
       
      Fiz no css da seguinte forma.
       
      <style> .bg-img{ background-image: url('assets/bg/banner-fundo.png'); background-size: cover; position:relative; background-color: rgba(242,17,125,0.91); filter:opacity(alpha=60); -moz-opacity:0.9; opacity:0.6; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: 0.3s; } </style> A parte do html esta assim
       
      <header class="bg-img"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-4"> <a href="./" class="logo" style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)"> <img src="assets/logo/minha-logo.png" alt="" title=""> </a> </div> <div class="col-lg-9 col-md-8 dados"> <h1 id="wa7_font">Minha Empresa</h1> <h2 id="wa7_font">Minha Categoria</h2> <br> <div class="telefones"> <a href="tel:556699999999" class="fixo"> <i class="fas fa-phone-volume"></i> <span>(66) 9999-9999</span> </a> <a href="tel:5566999999999" class="celular"> <i class="fas fa-mobile-alt"></i> <span>(66) 9.9999-9999</span> </a> </div> <div class="endereco" id="wa7_font_letra"> <p> <i class="fas fa-map-marker-alt"></i> Rua: Palmas, 2345, Centro - Sorriso/MT </p> </div> </div> </div> </div> </header> Fico no guardo da ajuda ai
    • By _marlon307
      Boa noite. Bom Dia.
      Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado.
       
      import React, { useState } from 'react'; import { Link } from 'react-router-dom'; //import DropModMn from '../../Helper/DropModMn'; import { ReactComponent as Respponse } from '../../icons/respponse.svg'; import styles from '../css/search.module.css'; import SubMenuCtg from './SubMneu/SubMenuCtg';   const Search = () => {       const menu = [         {             nctg: 'Masculino',             ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'],         },         {             nctg: 'Femenino',             ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'],         },         {             nctg: 'Criança',             ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'],         },         {             nctg: 'Acessórios',             ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'],         },         {             nctg: 'Promoção',             ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'],         }       ];      const [expand, setExpand] = useState(false);       function MouseOver(event){         event.preventDefault();                  console.log(event);           if(expand) setExpand(!expand);         else setExpand(!expand);     }       return (           <nav className={styles.search}>               <div className={styles.ct}>                 <Link to="/" className={styles.index}>                     <Respponse aria-label="Respponse"/>                 </Link>               </div>               <div className={styles.ct}>                   <ul className={styles.ldep}>                       {menu.map((m) =>                                                  <li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}>                               <Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link>                                                          <SubMenuCtg gl={m.ctg} exp={expand} />                                                    </li>                     )}                                      </ul>             </div>         </nav>     ) }   export default Search
    • By Fluk
      Bom dia Galera, 
      Sou novo por aqui, estou estudando um pouco sobre o Google Script e Java Script. 

      Estou tentando criar um programinha que lê e exibe em tela os dados que estão armazenados em minha Base (FibreBase). 
      Mas quando tento puxar através da API Google google.script.run.minhaFunção() e salvar em uma variável o JavaScript passa direto não aguardando o fim da leitura de arquivo. 
      Dei uma lida sobre ser assíncrona a requisição que estou fazendo, mazers tentei de varias forma fa aguardar mas não consegui. 

       
      document.getElementById('ConsultarClientes').addEventListener( 'click',   function (){     // Buscar dados  FireBase Lista de Clientes     const clientes = getFireBase('Clientes/Arquivos');     clientes.then(retorno => console.log(retorno));   } ,false);   async function getFireBase(chave){   return google.script.run.withSuccessHandler().getFireBase(chave); };   Console log retorno
       
    • By SingleSistemas
      Olá, estou escrevendo um código aonde preciso colocar o JSON dentro de uma array, porém, o JSON foi parciado utilizando o JSON.parse, para atribuir o conteudo do document.todosOsFretes, segue o exemplo:  
      Queria saber qual alternativa que pode ser feita para mim poder colocar o document.todosOsFretes dentro de uma array e pesquisar nele, algum campo...
      Desde já agradeço.
       
       
       
       

    • By Jack Oliveira
      Ola pessoal boa noite me veio uma duvida sobre Informações em JSON
      bom tenho um dominio principal que contem todas as informações 
      deste dominio quero uma forma que outras site receba as notificações de novos post etc...
      Ex: meudominiomaster.com
      dominiocliente.com
       
      meu html e o json esta assim
       
      <?php //ESTE FICARAR NO PAINEL DO CLIENTE $json = file_get_contents("https://meusitemaster.com/sites-novos.php"); $json_output = json_decode($json, true); foreach($json_output as $InfoJson){ $UrlJson=''.ConfigPainel(url_base_json.'; } ?> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6" style="background-color:transparent; margin-bottom:25px;"> <div class="card"> <div class="card-header white"><strong> <?= $InfoJson['titulo']; ?> <span class="btn btn-primary float-right">Novo na Loja</span></strong></div> <div class="card-body p-0"> <img class="img-fluid" src="<?= $UrlJson; ?>assets/imagens/<?= $InfoJson['banner']; ?>" /> <ul class="list-group list-group-flush no-b"> <li class="list-group-item"> <i class="icon icon-calendar text-blue"></i>Data: <?= $InfoJson['data']; ?> </li> </ul> </div> <div class="card-footer white text-center"> <a class="btn btn-sm btn-primary tooltips" target="_blank" href="_blank" data-tooltip="Comprar <?= $InfoJson['titulo']; ?>"><i class="icon-shopping_cart"></i></a> </div> </div> </div> <?php }} ?> Minha duvida é teria outra forma de fazer isso em json?? ou seja mais profissional?
×

Important Information

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