it-swarm.com.de

Kreis Schaltfläche CSS

Ich bin ein Anfänger und sehr verwirrt, als Div-Tag, wenn ich die gleiche Breite und Höhe mit Randradius gebe: 50% wird es immer ein Kreis. aber mit dem Tag a, falls ich einen Kreisknopf machen möchte, funktioniert es nicht so. In diesem Fall versuche ich, eine Schaltfläche für den Kreisrahmen anklickbar zu machen.

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>


.btn {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
}
28
pexichdu

Für das Tag div gibt es bereits die Standardeigenschaft display:block vom Browser angegeben. Für das Ankertag gibt es keine vom Browser angegebene Anzeigeeigenschaft. Sie müssen die Anzeigeeigenschaft hinzufügen. Deshalb benutze display:block oder Anzeige: inline -block. Es wird klappen.

.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>
40
Sagar Kodte
.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>

oder sehr einfach für <a/>

.round-button {
    display:block;
    width:80px;
    height:80px;
    line-height:80px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #555777;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #777555;
}
<a href="http://example.com" class="round-button">Button</a>

für jsfiddle Referenz hier klicken

6
Udhay Titus

benutze diese 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>
3
user6597211

Hinzufügen display: block;. Das ist der Unterschied zwischen einem <div> Tag und ein <a> Etikett

.btn {
      display: block;
      height: 300px;
      width: 300px;
      border-radius: 50%;
      border: 1px solid red;
    }
2
Jack Ducasse

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;
}
2
lesyk

Obwohl ich eine akzeptierte Antwort und andere gute Antworten sehen kann, dachte ich darüber nach, was ich getan habe, um dieses Problem zu lösen (in nur einer Zeile).

CSS (Erstellt eine Klasse):

.circle {
    border-radius: 50%;
}

HTML (Diese CSS-Klasse zu meiner Schaltfläche hinzugefügt):

<a class="button circle button-energized ion-paper-airplane"></a>

So einfach, oder?

Hinweis: Was ich tatsächlich getan habe, war die ordnungsgemäße Verwendung von ionic Klassen mit nur einer Zeile CSS.

Sehen Sie Ergebnis auf dieser JSFiddle:

https://jsfiddle.net/nikdtu/cnx48u43/

1