como alterar a forma de apresentar o botão círculo [duplicado]

StackOverflow https://stackoverflow.com//questions/11671429

Pergunta

Possíveis Duplicados:
Desenhar o Círculo usando apenas css

Eu gostaria de saber se existe alguma forma de alterar a forma do botão de envio do retângulo de forma circular??

Eu não quero usar uma circular shapped imagem de solução. Eu quero a todas as outras características, o botão de estilo css.

Foi útil?

Solução

Sua pergunta já está respondida, mas eu recomendo que você O Twitter Bootstrap.

É um HTML/CSS framework que permite que você faça grandes botões (entre outros) facilmente.

Esta botões são "crossbrowser" o que significa que eles são compatíveis com o Internet Explorer.

Com apenas uma classe - btn - você pode estilizar um <button>, <input type="button"> ou <a>.

Este :

<button class="btn"></button>

Dá-se de que:

enter image description here

Você também pode personalizar seu botão rapidamente, com um opcional de classe :

btn-primary, btn-info, btn-success, btn-warning, btn-danger e btn-inverse.

Este classes de transformar o seu botão como :

enter image description here

Em seguida, você pode escolher o tamanho com as classes btn-large, btn-small e btn-mini.

Finalmente, você pode adicionar um ícone (a lista está aqui) em seu botão.

Este:

<button class="btn btn-success">
    <i class="icon-shopping-cart icon-white"></i>
    <span>Checkout</span>
</button>

Dá-se de que:

enter image description here

Divirta-se com seus novos botões. :)

Outras dicas

Utilização border-radius propriedade.

Exemplo:

.button {
    width: 100px;
    height: 100px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 50%
}

O exemplo acima irá dar-lhe uma regulares do círculo.

Se você quer apenas um pouco de forma arredondada, tente isso:

.button {
    width: 100px;
    height: 30px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 5px
}

Demonstração ao vivo: Regular círculo
Demonstração ao vivo: Forma arredondada
Demonstração ao vivo: Botão de entrada com texto

Use raio de fronteira CSS.Eu recomendaria googling 'CSS botão gerador' ou tal e encontrar qualquer número de ferramentas de geração de botão que você pode jogar por perto para obter o CSS.Você só precisa ter certeza de a altura do elemento= largura e, em seguida, ajustar o radii de canto em conformidade.

Usar este estilo:

input[type='submit'] {
    width:100px;
    height:100px;
    border-radius:50px;
}​

Você pode usar border-radius no CSS, mas não ser suportada no internet explorer.

Brincar com:-

border-radius: 10px 10px 10px 10px

Eu sugiro para usar a interface do JQuery (você pode fazer o seu próprio tema) http://jqueryui.com/themeroller/

ou

css3 http://webdesignerwall.com/tutorials/css3-gradient-buttons

CSS3 não funcionará no IE.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top