So ändern Sie die Form der Schaltfläche „Senden“ in einen Kreis [Duplikat]

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

Frage

Mögliches Duplikat:
Zeichnen Sie einen Kreis nur mit CSS

Ich würde gerne wissen, ob es eine Möglichkeit gibt, die Form der Schaltfläche „Senden“ von einem Rechteck in eine Kreisform zu ändern?

Ich möchte keine kreisförmige Bildlösung verwenden. Ich möchte alle anderen Eigenschaften der Schaltfläche wie im CSS-Stil.

War es hilfreich?

Lösung

Ihre Frage ist bereits beantwortet, aber ich empfehle Sie weiter Twitter-Bootstrap.

Es handelt sich um ein HTML/CSS-Framework, mit dem Sie erstellen können tolle Knöpfe (unter anderem) leicht.

Diese Schaltflächen sind „crossbrowserfähig“, d. h. sie sind mit dem Internet Explorer kompatibel.

Mit nur einer Klasse - btn - Sie können a stilisieren <button>, <input type="button"> oder <a>.

Das :

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

Gibt das:

enter image description here

Sie können Ihre Schaltfläche auch schnell mit einer optionalen Klasse anpassen:

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

Diese Klassen transformieren Ihren Button folgendermaßen:

enter image description here

Anschließend können Sie bei den Klassen eine Größe auswählen btn-large, btn-small Und btn-mini.

Schließlich können Sie ein Symbol hinzufügen (Die Liste ist hier) in Ihrem Button.

Das:

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

Gibt das:

enter image description here

Viel Spaß mit deinen neuen Knöpfen. :)

Andere Tipps

Verwenden border-radius Eigentum.

Beispiel:

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

Das obige Beispiel ergibt einen regelmäßigen Kreis.

Wenn Sie nur eine leicht abgerundete Form wünschen, versuchen Sie Folgendes:

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

Live-Demo: Regelmäßiger Kreis
Live-Demo: Abgerundete Form
Live-Demo: Eingabetaste mit Text

Verwenden Sie den CSS-Randradius.Ich würde empfehlen, nach „CSS-Schaltflächengenerator“ oder ähnlichem zu googeln und eine beliebige Anzahl von Schaltflächengenerierungstools zu finden, mit denen Sie herumspielen können, um das CSS richtig hinzubekommen.Sie müssen lediglich darauf achten, dass die Höhe des Elements gleich der Breite ist, und dann die Eckradien entsprechend anpassen.

Verwenden Sie diesen Stil:

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

Sie können border-radius in Ihrem CSS verwenden, es wird jedoch im IE nicht unterstützt.

Spielen Sie herum mit:-

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

Ich würde vorschlagen, entweder die Jquery-Benutzeroberfläche zu verwenden (Sie können Ihr eigenes Thema erstellen).http://jqueryui.com/themeroller/

oder

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

CSS3 funktioniert im IE nicht.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top