Ik ben een beginner en erg in de war, als een div-tag wanneer ik dezelfde breedte en hoogte geef met rand-straal: 50% wordt altijd cirkel.
Maar met de tag A voor het geval ik een cirkelknop wil maken, werkt het niet op die manier. Dit is wanneer ik een cirkelgrens-knop probeer te maken.
.btn {
height: 300px;
width: 300px;
border-radius: 50%;
border: 1px solid red;
}<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>
Antwoord 1, Autoriteit 100%
Voor divTAG Er is al standaard onroerend goed display:blockGegeven door browser. Voor ankertag is er geen eigenschap weergave gegeven door browser. U moet erop wijselijk aan toevoegen. Daarom gebruikt u display:blockof DISPLAY: INLINE- block. Het zal werken.
.btn {
display:block;
height: 300px;
width: 300px;
border-radius: 50%;
border: 1px solid red;
}<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>Antwoord 2, Autoriteit 17%
.round-button {
width:25%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #cfdcec;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}<div class="round-button"><div class="round-button-circle"><a href="http://example.com" class="round-button">Button!!</a></div></div>Antwoord 3, autoriteit 10%
Hier is een ronde knop met een plat ontwerp:
.btn {
height: 80px;
line-height: 80px;
width: 80px;
font-size: 2em;
font-weight: bold;
border-radius: 50%;
background-color: #4CAF50;
color: white;
text-align: center;
cursor: pointer;
}<div class="btn">+</div>Antwoord 4, autoriteit 4%
Voeg display: block;toe. Dat is het verschil tussen een <div>-tag en een <a>-tag
.btn {
display: block;
height: 300px;
width: 300px;
border-radius: 50%;
border: 1px solid red;
}
Antwoord 5, autoriteit 4%
gebruik deze css.
.roundbutton{
display:block;
height: 300px;
width: 300px;
border-radius: 50%;
border: 1px solid red;
}<a class="roundbutton" href="#"><i class="ion-ios-arrow-down"></i></a>Antwoord 6, autoriteit 3%
Hoewel ik een geaccepteerd antwoord kan zien en ook andere geweldige antwoorden, maar ik dacht eraan te delen wat ik heb gedaan om dit probleem op te lossen (in slechts één regel).
CSS (een klas gemaakt):
.circle {
border-radius: 50%;
}
HTML (die css-klasse aan mijn knop toegevoegd):
<a class="button circle button-energized ion-paper-airplane"></a>
Zo makkelijk toch?
Opmerking:Wat ik eigenlijk deed, was het juiste gebruik van ionische klassen met slechts één regel CSS.
Bekijk het resultaat zelf op deze JSFiddle:
https://jsfiddle.net/nikdtu/cnx48u43/
Antwoord 7, autoriteit 3%
HTML:
<div class="bool-answer">
<div class="answer">Nej</div>
</div>
CSS:
.bool-answer {
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
Antwoord 8
Voor de knop cirkel maken ben je deze codes:
.circle-right-btn {
display: block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #fefefe;
margin-top: 24px;
font-size:22px;
}<input class="circle-right-btn" type="submit" value="<">Antwoord 9
Een ronde knop met vakschaduw https://v2.vuetifyjs .com/en/components/floating-action-buttons/
.btn {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 2em;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
border: none;
cursor: pointer;
position: fixed;
z-index: 1;
bottom: 10%;
right: 4%;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}<div class="btn">+</div>Antwoord 10
Het probleem is dat de werkelijke breedte van een a-tag afhangt van de inhoud ervan. Uw code heeft geen tekst in de a-tag, dus het lijkt op een hongergezonken cirkel. Als u de tag divnaast de agebruikt, krijgt u de gewenste resultaten.
Bekijk deze code:
.btn {
background-color: green;
border-radius: 50%;
/*this will rounden-up the button*/
width: 80px;
height: 80px;
/*keep the height and width equal*/
}<a href="#">
<!--use the URL you want to use-->
<button class="btn">press me</button>
</a>Antwoord 11
je zou altijd kunnen doen
html: <div class = "btn"> <a> <button> idk whatever you want to put in the button </button> </a> </div>
en doe dan
css:
.btn a button { border-radius: 50% }
werkt naar mijn mening perfect
Antwoord 12
Als u een meer algemene oplossing wilt die het formaat van het scherm aanpast, kunt u dit voorbeeld gebruiken.
.btnCircle {
border-radius: 50% ;
padding: 3vw;
display: flex;
justify-content: center;
align-items: center;
width:3vw;
height:3vw;
font-size: 2vw;
outline:none;
border: none;
}
.btnBackgroundColor{
background: green;
}
.btnColor{
color: white;
}
<button class="btnCircle btnBackgroundColor btnColor">Yes</button>