Bootstrap/CSS: Wie man separaten Kreisradius in einem Kreisbutton im Bootstrap hinzufügt, wenn es aktiv ist

Question

Hallo Leute, ich habe eine Frage über Kreis in CSS und Bootstrap. Ich habe eine Bootstrap-Taste mit border-Radius ist gleich 50%. mein Ziel ist es, einen separaten Grenzradius zu machen, wenn sein aktiver

Mein erster Ansatz, um die Kontur manipuliert, ich eine gewisse Verbesserung, aber ich nicht meinen Umriss Kreis machen kann, so meine nächste Frage ist es möglich, Umriss Kreis zu machen? Danke Jungs

Answer 1

Verwenden Sie ein absolut positioniert Pseudo-Element, das außerhalb der Schaltfläche geht.

button { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background: purple; 
 
    position: relative; 
 
    margin: 1em; 
 
} 
 
button, button:after { 
 
    border: 3px solid black; 
 
    border-radius: 50%; 
 
} 
 
button.active:after { 
 
    position: absolute; 
 
    top: -1em; left: -1em; right: -1em; bottom: -1em; 
 
    content: ''; 
 
    background: linear-gradient(90deg, black, white); 
 
    transform: rotate(45deg); 
 
    transition: transform .25s; 
 
}

<button class="active">button</button> 
 

 
<button>button</button>