botão em css

[adrena 0]

Ola tenho esse código aqui a baixo e não sei como por espaço entre os botões tipo na imagem.

 

[inline].botao {
padding: 2px 2px;
margin:5px auto;
border: 1px solid #ffcc00;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

background-color: #ffcc00 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)) !important;
background: -webkit-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -moz-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -ms-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -o-linear-gradient(top, #ffcc00, #ff6600) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff6600',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

font-family:"Segoe UI";
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 #666;

box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
cursor:pointer;
position: relative;
}


a:link {text-decoration: none;color: #000000}
a:active {text-decoration: none;}
a:visited {text-decoration: none;color: #000000}
a:hover {text-decoration: underline;color: #000000}
[/inline]

 

alguém pode me dar essa força

 

[]'s

[celsomtrindade 2]

você já tentou:

margin: 5px 10px;

?

[rikaschmitt 54]

tenta por

margin:10px;

[adrena 0]

você já tentou:

margin: 5px 10px;

?

deu espaço entre os botão mais ainda continua um em cima do outro

[celsomtrindade 2]

deu espaço entre os botão mais ainda continua um em cima do outro

 

Tenta usar um valor maior, extrapole para ver se tem algum resultado, depois você vai ajustando.

Se não funcionar, você tem algum outro código dando conflito, pois eu testei aqui e funcionou certinho com o mesmo código que você passou.

 

Qualquer coisa, use o console/inspecione o elemento no browser e faça as alterações ali. Assim você vê as alterações na hora e poderá saber onde mudar e o que acontece. =D

[ignoredxyz 17]

o que acontece é que os botões possuem por padrão o display: inline; e elementos com esse display não aceitam margens.

 

Adicione isso ao código css do botão:

.botao {
    display: inline-block;
    margin: 5px 10px;
}