botões do estilo a href

lucianolcoa · 22 de dezembro de 2016

Pessoal vim pedir a ajuda de vocês para um problema.

Estou fazendo uma pagina para o meu projeto de automação, e consegui estilizar com html e css a pagina... e fiz 4 botões do estilo a href.

O problema é que eu queria que o botão ocupasse toda a porção lateral da página, e ele ocupa apenas um pequeno espaço.

como faço isto?

vou postar o código de estilização css do botao e o propio a href

<style type="text/css" media="all">
.btn{transition: background-color 2s;background-color:#27408B;color:#8B3E2F;font-weigth:700px;width:600;height:40;cursor:pointer;pading:10px;text-transform:uppercase;border:none;text-decoration: none;}
.btn:hover{background-color:#8B0000;color:#8B3E2F;font-weigth:700px;width:600;height:40;cursor:pointer;padding:8px;text-transform:uppercase;border:none;text-decoration: none;}
.btn:active{position:relative;top:5px;box-shadow:none;}</style><body></body>

<a href="#" type="button" class="btn">desligar sala </a><br><br>

<a href="#"  type ="button"class="btn">desligar sala </a><br><br>

JonathanMMachado · 22 de dezembro de 2016

5 minutos atrás, lucianolcoa disse:

toda a porção lateral da página

Não entendi direito o que você quis dizer com isso.
Não seria setar o width: 100%?

lucianolcoa · 22 de dezembro de 2016

@JonathanMMachado Pior que na class btn eu setei o widht: 100%, mas não aconteceu nada

JonathanMMachado · 22 de dezembro de 2016

Adiciona o display:block (eu adicionei o text-align:center também pro texto ficar no centro) que ele já fica da maneira que você quer.

A minha pergunta foi mais pra saber se era aquilo mesmo que você queria.

.btn{
  transition: background-color 2s;
  background-color:#27408B;
  color:#8B3E2F;
  font-weigth:700px;
  width:100%;
  height:40;
  cursor:pointer;
  pading:10px;
  text-transform:uppercase;
  border:none;
  text-decoration: none;
  display:block;
  text-align: center;
}

A resposta eu encontrei aqui

lucianolcoa · 22 de dezembro de 2016

@JonathanMMachado Agora ficou assim

adicionado 1 minuto depois

Esqueça o que acabei de postar, consegui arrumar, mexi no btn:hover e esqueci de mexer no btn comum hehe, mas valeu me ajudou.

JonathanMMachado · 22 de dezembro de 2016

Você pode colocar as tags a dentro de uma div, e limitar a div do tamanho que você queira usando o style: "width:x%".
Exemplo:

<div style="width: 30%">
  <a href="#" type="button" class="btn">desligar sala </a><br><br>
  <a href="#"  type ="button"class="btn">desligar sala </a><br><br>
</div>