-1

Estou querendo criar esse button:

inserir a descrição da imagem aqui

Já tentei isso:

<html>

<head>
    <style>
        button {
            background-color: #343A40;
        }
        
        span {
            background-color: #9A9DA0;
            width: 50px;
            display: block;
            margin-bottom: 6px;
            height: 8px
        }
    </style>
</head>

<body>

    <button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </button>

</body>

</html>

Como faço para deixar igual ao modelo da imagem?

3 Respostas 3

3

Existem muitas formas de fazer, fiz um modelo só estilizando o background com linear-gradiente

body {
  background-color: #333;
}

button  {
  all: unset;
  width: 64px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid #999;
  background-image:
                    repeating-linear-gradient(to bottom, transparent 0%, transparent 22%, #999 22%, #999 26%, transparent 26% ),
                    linear-gradient( #333 0%, #333 100%);
  background-size: 50% 100%, 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
<button></button>

0

section {
    background-color: #343A40;
    border: 1px solid #777777;
    border-radius: 5px;
    padding: 8px 5px 5px 17px;
}
button{
    width: 73px;
    height: 49px;
    background: #3d3d3d;
    border: none;
}
span{
    width: 25px;
    height: 2px;
    background: rgb(153, 153, 153);
    display: block;
    margin-bottom: 5px;

}
<button>
    <section>
    <span></span>
    <span></span>
    <span></span>
</section>
</button>

4
  • 2
    Qual a razão de adicionar um <section> dentro do botão? Isso não fere a semântica do documento?
    – Woss
    25/10/2019 às 13:39
  • Mas é um botão ou uma section? 25/10/2019 às 13:41
  • eu coloquei só pra estilizar melhor 25/10/2019 às 14:05
  • 2
    Ao meu ver isso fere a semântica do HTML e invalida-o perante a especificação W3C/WHATWG dado que <section> é um elemento de sessão enquanto <button> espera apenas elementos fraseados. Estilo deveria ser responsabilidade do CSS, não do HTML.
    – Woss
    25/10/2019 às 14:18
0

button {
    background-color: #343A40;
}

span {
    background-color: #9A9DA0;
    width: 20px;
    display: block;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 8px;
    margin-right: 8px;
    height: 2px
}
<button>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</button>

Você deve fazer log-in para responder a esta pergunta.