Botão arredondado

[paulopatto 0]

Boa tarde a todos.

 

 

Gostaria de saber como posso criar botões com cantos arredondados por css. Existe uma maneira de colocar uma imagem na borda do elemento input[type=button]{} ?

[Thiago Retondar 18]

Tenha em mente que esse tipo de seletor - input[type=text/css] - não irá funcionar em browsers como Internet 6 e se não me engano o 7.

 

Para fazer o que deseja, pode usar CSS. Olhe:

 

input[type="button"]{
	border-radius: 15px;
}

O border-image ainda precisa de prefixos com -moz-, -webkit- e outros. Mas você pode ver como fazer aqui http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.css3.info/preview/border-image/

 

Também há a opção de usar JavaScript e para facilitar ainda mais o com framework jQuery. :D

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Vinicius Cainelli 17]

jQuery tem o q você precisa, nesse link

 

http://malsup.com/jquery/corner/

 

e nesse

 

http://www.becck.com/?sec=visualizarMaterias&id_materia=95&id_coluna=29

[wallysson nunes 0]

Tem uma coisa em javascript que me chamou muita atenção, chama-se nifty corners, é tipo uma classe em java script, que pega uma imagem, ou ateh um bacground e coloca bordas arrendodadas nele, o mais interessante que funciona tanto em IE8 como no firefox!

 

vai aew o código:

 

<script type="text/javascript" src="niftycube.js"></script>
< script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script> 

 

Você pode checar o resultado aqui: http://www.html.it/articoli/niftycube/nifty1.html

Para mais dúvidas, ou mais exemplos dessa classe: http://www.html.it/articoli/niftycube/index.html

 

Ao final da página você pode encontrar os códgigs necessários para utiliza-lo!

 

PS: Caso você tenha dificuldades em inglês, não deixe que isso o limite, vai no google e traduz, tem muita gente que faz isso, e se tiver força de vontade da até para aprender!

 

Abraços!