como alterar a forma de apresentar o botão círculo [duplicado]
-
12-12-2019 - |
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.
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:
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 :
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:
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.