Botao quadrado só com borda

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

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!

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

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