come cambiare la forma del pulsante invia a cerchio [duplica]

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

Domanda

Possibile duplicazione:
Disegna Cerchio usando solo css

Vorrei sapere se c'è un modo per cambiare la forma del pulsante di invio da rettangolo a forma circolare??

Non voglio usare una soluzione di immagine shapped circolare. Voglio tutte le altre caratteristiche del pulsante come dallo stile css.

È stato utile?

Soluzione

La tua domanda ha già risposto ma ti consiglio Twitter Bootstrap.

È un framework HTML/CSS che ti permette di fare grandi pulsanti (tra gli altri) facilmente.

Questi pulsanti sono "crossbrowser", il che significa che sono compatibili con Internet Explorer.

Con una sola classe - btn - puoi stilizzare un <button>, <input type="button"> o <a>.

Questo :

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

Dà che:

enter image description here

Puoi anche personalizzare rapidamente il tuo pulsante con una classe opzionale :

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

Questa classe trasforma il tuo pulsante in questo modo :

enter image description here

Quindi puoi scegliere una dimensione con le classi btn-large, btn-small e btn-mini.

Infine, è possibile aggiungere un'icona (la lista è qui) nel tuo pulsante.

Questo:

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

Dà che:

enter image description here

Divertiti con i tuoi nuovi pulsanti. :)

Altri suggerimenti

Utilizzare border-radius proprieta.

Esempio:

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

L'esempio sopra ti darà un cerchio regolare.

Se vuoi solo una piccola forma arrotondata, prova questo:

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

Demo dal vivo: Cerchio regolare
Demo dal vivo: Forma arrotondata
Demo dal vivo: Pulsante di input con testo

Utilizzare CSS border radius.Consiglierei di cercare su Google 'generatore di pulsanti CSS' o simili e trovare qualsiasi numero di strumenti di generazione di pulsanti con cui puoi giocare per ottenere il css giusto.Dovresti solo assicurarti che l'altezza dell'elemento = larghezza e quindi regolare i raggi d'angolo di conseguenza.

Usa questo stile:

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

Puoi usare border-radius nel tuo CSS ma non sarà supportato in IE.

Giocare con:-

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

Suggerirei di utilizzare l'interfaccia utente Jquery (puoi farti possedere il tema) http://jqueryui.com/themeroller/

o

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

CSS3 non funzionerà in IE.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top