Menu
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> 
560
Use the border-radius Property to Create a Circle Button in CSS. We can use the border-radius property to create a circle button in CSS. The property creates the rounded corners to the selected element by adding the radius to the element's corners.
Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/actiivity_main. xml. In the above code, we have taken the button with a round_button background.
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
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>
.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
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
