Circle button css
I'm a beginner and very confused, as a div tag when I give the same width and height with border-radius: 50% it always becomes circle. but with the tag a in case I want to make a circle button, It doesnt work that way. This is when I try to make a circle border button clickable.
.btn {
height: 300px;
width: 300px;
border-radius: 50%;
border: 1px solid red;
}<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>
Solution 1:
For div tag there is already default property display:block given by browser. For anchor tag there is not display property given by browser. You need to add display property to it. That's why use display:block or display:inline-block. It will work.
.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>Solution 2:
.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>or very simple for <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>for jsfiddle reference click here
Solution 3:
Here is a flat design circle button:
.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>but the problem is that the + might not be perfectly centered vertically in all browsers / platforms, because of font differences... see also this question (and its answer): Vertical alignement of span inside a div when the font-size is big