web-dev-qa-db-ja.com

サークルボタンCSS

私は初心者であり、非常に混乱しています。境界線半径で同じ幅と高さを指定すると、divタグとして、常に50％になります。ただし、丸ボタンを作成したい場合のタグaを使用すると、そのようには機能しません。これは、円の境界ボタンをクリック可能にしようとするときです。

<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

divタグには、ブラウザによって指定されたデフォルトのプロパティdisplay:blockが既にあります。アンカータグの場合、ブラウザによって指定された表示プロパティはありません。表示プロパティを追加する必要があります。 display:blockまたはdisplay：inline -blockを使用する理由です。それが動作します。

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

または<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>

jsfiddle参照用 ここをクリック

6
Udhay Titus

この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

display: block;を追加します。 <div>タグと<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

私は受け入れられた答えと他の素晴らしい答えも見ることができますが、この問題を解決するために私がしたことを共有することを考えました（1行で）。

CSS（クラスを作成）：

.circle {
    border-radius: 50%;
}

HTML（CSSクラスをボタンに追加）：

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

とても簡単ですよね？

注：実際にやったのは、CSSを1行だけ使用してionicクラスを適切に使用することでした。

このJSFiddleで自分の結果を見るを参照してください：

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

1
Nikhil Maheshwari