Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

caroltors

HTML/CSS Botões

Por , em Desenvolvimento frontend

Recommended Posts

caroltors    0

caroltors
Postado

Oi gente,

Eu estou num impasse , não consigo de jeito nenhum centralizar os botões no meio da página um ao lado do outro.
Por favor se alguém puder me ajudar ((:

 

Esse é o código:

<style type="text/css">
.but {
display: inline-block;
background-color: #0068B4;
color: #fff;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: consolas;
font-size: 16px;
border: 0px;
}
.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}
.but-shadow {
box-shadow: 1px 1px 1px #999;
}
.but-rc {
border-radius: 4px;
}
</style>
</head>
<body>
<br>
<div align="center"><img src="C:\Users\cstorres\Documents\workti\Capturar.png" title="Videogames" height="80" width="450"></div>
</br>
<a title="Inicio" class="but but-shadow but-rc">INICIO</a>
<button title="Meio" class="but but-shadow but-rc">MEIO</button>
<button title="Fim" class="but but-shadow but-rc">FIM</button>
<button title="Extras" class="but but-shadow but-rc">EXTRAS</button>
<button title="Contato" class="but but-shadow but-rc">CONTATO</button>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

coloca eles dentro de um div e

 

#minhaDiv {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
position: absolute;
border: 1px solid black;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado 




.button-bar {



    position: absolute;



    width: 100%; height: auto;



    background: rgba(125, 125, 125, .4); /* ou deixar sem cor */



    top: 45%;



    text-align: center;



}


 



button {



    padding: 6px 12px;



    border: none;



    margin: 4px 0;



    background: #68aceb;



    color: #fff;



}









<body>



    <div class = 'button-bar'>



        <button>Botao 1</button>



        <button>Botao 2</button>



        <button>Botao 3</button>



        <button>Botao 4</button>



    </div>



</body>


 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito