How do I create this Button in HTML?

Asked

Viewed 66 times

-1

I want to create this button:

inserir a descrição da imagem aqui

I’ve tried that:

<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>

How do I make it equal to the image model?

html css

3 answers

4

There are many ways to make, I made a model just styling the background with 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>

1

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>

  • 2

    Why add a <section> inside the button? This does not hurt the document semantics?

  • But it’s a button or a Section?

  • I put it just to stylize better

  • 2

    In my view this hurts the semantics of HTML and invalidates it under the W3C/WHATWG specification given that <section> is a session element while <button> expects only phrased elements. Style should be the responsibility of CSS, not HTML.

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.