The button you see above is not an image. Its a simple html button that has been given a circular shape using CSS.
I want to share a simple formula I use personally for making these buttons and other html elements circular in shape.
The following code below creates the circular button:
<html>
<head>
<title>A circular button</title>
<style>
.circle_shape
{
border: solid 1px green;
width:150px;
height: 150px;
border-radius: 180px;
}
</style>
</head>
<body>
<input type="button" class="circle_shape" value="I am a circular button"/>
</body>
</html>
An input element of type "button" is put in place. The class is set as "circle_shape" and it's value is given as "I am a circular button".
<input type="button" class="circle_shape" value="I am a circular button"/>Then we set the style.
.circle_shape
{
width:150px;
height: 150px;
border-radius: 180px;
}
The maths I use is easy. i. Let the value of the width and height be the same.
ii. The border-radius value should be the value given to the width and height + 30.
Following the maths above, valid style for the circular shape are:
.circle_shape
{
width:250px;
height: 250px;
border-radius: 280px;
}
.circle_shape
{
width:30px;
height: 30px;
border-radius: 60px;
}
and so on...
No comments:
Post a Comment