how do i do this kind of box with text inside

[Derivan]

I would like to know how to make this type of box with the text inside, like the example in the photo

[niche]

First step.  Let's agree on what we're looking at.

I see buttons, floating inside a div, with some padding and a brown background.  What do you see?

[Derivan]

22 minutes ago, niche said:

Primeiro passo. Vamos concordar com o que estamos olhando.

Vejo botões flutuando dentro de uma div, com algum preenchimento e um fundo marrom. O que você vê?

It's not a button, it's more like a tag, what I'd like to do is this effect of a frame with the text inside (it doesn't have a brown color, it's actually a transparent one)

[Ingolme]

All you need to do is add a border to an inline-block. Any element will do. If they link to anywhere, an <a> element will work.

.tag {
  display: inline-block;
  padding: 4px;
  color: #FFF;
  border: 1px solid #FFF;
  border-radius: 10px;
}

<a href="/" class="tag">Legendado</a>

For the filled block, you can give it a background-color and change the color to black.

[Derivan]

2 hours ago, Ingolme said:

Tudo que você precisa fazer é adicionar uma borda a um bloco embutido. Qualquer elemento serve. Se eles ligarem para qualquer lugar, um elemento <a> funcionará.

Para o bloco preenchido, você pode atribuir a ele uma cor de fundo e alterar a cor para preto.

thank you very much, now i managed to do