wie die Größe eines Elements ändern, ohne seinen Inhalt zu ändern. css

Ich habe in mein Projekt eine neue CSS-Bibliothek aufgenommen, die Designs für Buttons enthält. Ich möchte die Höhe dieser Taste ändern: wie die Größe eines Elements ändern, ohne seinen Inhalt zu ändern. css

aber wenn ich die hohe CSS-Eigenschaft verwenden, geschieht Folgendes:

nach line-height propiety:

Code:

<button class="btn btn-4 btn-4c icon-arrow-right" ><label>button</label></button>

Quelle: source

Wie können Sie die Größe ändern?

Danke für die Hilfe!

Quelle

2016-07-11 Reco Jhonatan

Welche hohe CSS-Eigenschaft verwendet haben? –

Für eine 1: 1-Skalierung unter Beibehaltung aller Proportionen können Sie eine 'transform: scale (0.5)' verwenden, obwohl dies die Schrift zu sehr verkleinern könnte. Wenn das Pfeilbild ein Hintergrundbild ist, funktioniert möglicherweise auch die Hintergrundposition. – mch

Versuchen Sie es mit line-height Eigenschaft

ZB: line-height: 0.5

<button class="btn btn-4 btn-4c icon-arrow-right" style="line-height:5" ><label>button</label></button>

einstellen line-height auch in dieser Klasse.

.btn-4:before { 
position: absolute; 
height: 100%; 
font-size: 125%; 
line-height: 6.5; //Adjust this 
color: #fff; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
transition: all 0.3s;

}

Quelle

2016-07-11 07:10:55

mit der Eigenschaft, die Sie mir geben, ist alles in Ordnung. Wenn ich jedoch auf den Knopf schwinge, ist der Pfeil immer noch schlecht positioniert. –

Geben Sie die Eigenschaft line-height sowohl für Text als auch für den Pfeil –

an, siehe Code. –

Wir brauchen mehr Details, wie die CSS Bibliothek Sie diese Klassen verwenden oder CSS-Code aller (btn btn-4 btn-4c icon-arrow-right), die auf der Schaltfläche verwendet werden, um Ihnen zu helfen.

Quelle

2016-07-11 07:34:01 Kan412

Bitte, siehe die Quelle. –

Sie müssen um ** Zeilenhöhe **, ** Auffüllen ** von 'btn',' btn-4: vorher' optimieren. ** Zum Beispiel: ** Ich habe das Padding von 'btn' in' padding: 21px 80px; 'und die Zeilenhöhe von' btn-4: before' in 'line-height: 3.1;' geändert – Kan412

hier ist die animierte Version :) https://jsfiddle.net/ahe128/evedzdbk/1/ Ihre Anfrage ist folgende Artcode :)

#button{ 
    width:200px; 
    height:50px; 
border-radius:5rem; 
    background:#2390fd; 
    margin:5%; 
    position:absolute; 
    display:table; 
    transition:.5s; 
} 
span{ 
font-size:15px; 
    font-weight:600; 
display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    color:white; 
    font-family:sans-serif; 
}

ich hoffe, dass dies für Sie nützlich ist :)

Quelle

2016-07-11 07:38:25 ahe

wie die Größe eines Elements ändern, ohne seinen Inhalt zu ändern. css

Antwort

Verwandte Themen