web-dev-qa-db-fra.com

Bouton cercle css

Je suis débutant et très confus, en tant que balise div lorsque je donne la même largeur et la même hauteur que border-radius: 50%, cela devient toujours un cercle. mais avec la balise a dans le cas où je veux faire un bouton de cercle, cela ne fonctionne pas de cette façon. C’est à ce moment que j’essaie de rendre cliquable un bouton de bordure de cercle.

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


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

Pour la balise div, la propriété par défaut display:block est déjà donnée par le navigateur. Pour la balise d'ancrage, il n'y a pas de propriété d'affichage donnée par le navigateur. Vous devez y ajouter une propriété d'affichage. C'est pourquoi utilisez display:block ou affichez: inline -block. Ça va marcher.

.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>

ou très simple pour <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>

pour référence jsfiddle cliquez ici

6
Udhay Titus

utiliser ce 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

Ajouter display: block;. C'est la différence entre une balise <div> et une balise <a>

.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

Bien que je puisse voir une réponse acceptée et d’autres bonnes réponses aussi, mais j’ai pensé partager ce que j’avais fait pour résoudre ce problème (en une seule ligne).

CSS (créé une classe): 

.circle {
    border-radius: 50%;
}

HTML (Ajout de cette classe css à mon bouton): 

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

Si facile, non?

Remarque: J'ai réellement utilisé les classes ionic avec une seule ligne de css.

Voir le résultat vous-même sur ce JSFiddle:

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

1
Nikhil Maheshwari