Pulsanti completamente circolari con dimensioni dinamiche

Question

Sto provando a creare pulsanti circolari in CSS. Io uso border-radius: 100% per rendere il pulsante simile a un cerchio ma funziona solo se imposto esplicitamente la larghezza e l'altezza dell'elemento. Ma se lo faccio, i pulsanti non regolare per correggere testo più grande

Questo è quello che ho provato finora:

.round-button{ 
 
    width: 60px; 
 
    height: 60px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    outline: none; 
 
    cursor: pointer; 
 
    border-style: none; 
 
    color: white; 
 
    background-color: #3498db; 
 
    border-radius: 100%; 
 
    overflow: none; 
 
    text-align: center; 
 
} 
 

 
.round-button:active{ 
 
    background-color: #2980b9; 
 
}

<div> 
 
    <button class="round-button">Button</button> 
 
</div> 
 
<div> 
 
    <button class="round-button">This text will overflow the button!</button> 
 
</div>

Come potete vedere i primi sguardi pulsante piuttosto OK, ma il testo nel secondo pulsante lo trabocca. Ho usato overflow: hidden per evitare che sembrasse brutto, ma mi piacerebbe che la dimensione dei pulsanti fosse regolata in base alle dimensioni del contenuto. È possibile?

Answer 1

Per disegnare un cerchio, è necessario un quadrato con cui iniziare.

È possibile inserire uno pseudo di altezza uguale alla larghezza utilizzando il riempimento verticale con valore percentuale.

https://www.w3.org/TR/CSS2/box.html#padding-properties La percentuale è calcolata rispetto alla larghezza del blocco contenitore del riquadrato generato, anche per 'padding-top' e 'padding-bottom'. Se la larghezza del blocco contenitore dipende da questo elemento, il layout risultante non è definito in CSS 2.1.

A differenza delle proprietà del margine, i valori per i valori di riempimento non possono essere negativi. Come le proprietà dei margini, i valori percentuali per le proprietà di riempimento si riferiscono alla larghezza del blocco contenitore della finestra generata.

Fai questo pseudo blocco in linea per aiutare il testo centrale.

Se il testo deve racchiudere alcune righe, deve essere racchiuso all'interno di un blocco in linea .. se si utilizza uno pseudo di blocco in linea.

È possibile impostare anche la larghezza massima e minima.

esempio:

.round-button{ 
 
    min-width: 60px; 
 
    max-width:120px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    outline: none; 
 
    cursor: pointer; 
 
    border-style: none; 
 
    color: white; 
 
    background-color: #3498db; 
 
    border-radius: 100%; 
 
    overflow: none; 
 
    text-align: center; 
 
    padding:0; 
 
} 
 
.round-button:before { 
 
    content:''; 
 
    display:inline-block;; 
 
    vertical-align:middle; 
 
    padding-top:100%; 
 
} 
 
span { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    max-width:90%; 
 
} 
 
.round-button:active{ 
 
    background-color: #2980b9; 
 
}

<div> 
 
    <button class="round-button"><span>Button</span></button> 
 
</div> 
 
<div> 
 
    <button class="round-button"><span>This text should NOT overflow the button!</span></button> 
 
</div>

Answer 2

siete alla ricerca di un modo automatico di fare la larghezza e l'altezza pari mentre aumenta la sua dimensione. Se è così, io non rispondo allo allo c'è un modo per farlo in CSS. Voglio dire che non ti aspetti width=height?

Non sono sicuro, ma JQuery potrebbe essere la soluzione perché ha operatori e può interagire con i CSS.

Modifica Dopo aver letto la risposta precedente, ora capisco che c'è un modo per farlo nel padding. Ma nella mia risposta ho detto "non penso". Ho adorato la soluzione di @GCyrillus BTW.