Botao quadrado só com borda

[Jamal xtz 0]

Estou começando agora a programar pra web, estou tendo dificuldades em fazer um botao quadrado com bordas arredondadas, mas que mostre somente a borda e o texto

[L. Henrique 179]

Jamal,

Essa é uma questão muito básica e também de atenção (não só de conhecimento em CSS), por isso vou explicar o passo a passo, então vamos ao que você precisa:

 

1. Botão com bordas - Esse é simples:

.botao {
   border: 1px solid #000;
}

Onde "1px" significa o tamanho da borda, "solid" é a sua estrutura (se é sólida, pontilhada, etc) e "#000" é a cor dessa borda.

2. As bordas precisam ser arredondadas - Essa também é simples, conceito geométrico. Se o objeto é circular, ele tem um raio, se ele tem raio:

.botao {
   border-radius: 5px;
}

Aqui é simples, você define um raio pra todas as bordas presentes no botão e os "5px" é o raio delas. Você também pode definir borda por borda: border-top-left-radius, border-top-right-radius, border-bottom-left-radius e border-bottom-right-radius.

3. O botão não pode ter fundo - Bem, você mesmo disse que não pode ter fundo, então automaticamente isso leva a crer que o fundo é ausente, se ele é ausente ele pode ser 0 ou nulo, ou seja:

.botao {
   background: none;
}

Você também pode "remover" o background da seguinte forma:

.botao {
   background: rgba(0,0,0,0);
}

Onde R = Red, G = Green, B = Blue e A = Alpha, e esse Alpha é o responsável pelo nível de opacidade do elemento.

 

4. Resultado:

.botao {
   border: 1px solid #000;
   border-radius: 5px;
   background: none;
}

Bons estudos e espero que consiga chegar no resultado esperado!

[Jamal xtz 0]

Vlew obrigado mais uma vez, fiquei muito bem explicado. Criei dois botoes, tem algum comando pra colocar um do lado do outro, usei uma div, mas eles continuam um em cima do outro

[L. Henrique 179]

Sim, na verdade você vai precisar adicionar mais uma propriedade na classe dos botões: display: inline-block; - porém precisam estar estruturados dessa forma:

<div>
   <button class="botao">
   <button class="botao">
</div>

E só então você aplica a propriedade acima:

.botao {
   display: inline-block;
}