top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How can I create round buttons using HTML?

+4 votes
357 views
How can I create round buttons using HTML?
posted Feb 23, 2015 by Merry

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

2 Answers

+3 votes
 
Best answer

we have a HTML Button as in the following:

<!DOCTYPE html>
<html>
<head>
     <link href="demo.css" rel="stylesheet" />
     <title>
        Round Button Demo
     </title>
</head>
<body>
    <button>Push Me</button>
</body>
</html>

We can make this button a round Button using CSS 3.0. By setting the value of the border-radius to 100%, you can make a Button round; see:

button 
 {
     height: 200px;
     width: 200px; 
     border-radius : 100%;
     background-color: #C91826;
}

button

answer Feb 23, 2015 by Vrije Mani Upadhyay
+3 votes

Here i am using the following code create HTML-5 button using CSS for Round

Code:

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <style>
        .round-button {
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #262626;
}
    </style>
</head> 
<body>
<button  class="round-button">Hi</button>      
</body>
</html>

OutPut:

enter image description here

answer Feb 23, 2015 by Manikandan J
Similar Questions
0 votes
How can convert this code by using forms not prompt !

<?xml version="1.0" encoding="utf-8" ?>
Assignment 2

var count;
// the number of value that you want to check if number or no
count=window.prompt("please enter value for count ");
var c;
c=parseInt(count);
if(!isNaN(c))
window.alert("The Value Is Number ! ");
else
{
window.alert("SorrY . The Value is Not Number (NaN ) ");
c=window.prompt(" NOT NUMBER ! \n please enter value for count ");
}
while(c<0)
{
c=window.prompt(" NEGATIVE NUMBER ! \n please enter value for count ");
if(!isNaN(c))
window.alert("The Value Is Number ! ");
else
{
window.alert("SorrY . The Value is Not Number (NaN ) ");
c=window.prompt(" NOT NUMBER ! \n please enter value for count ");
window.alert(" POSITIVE NUMBER ");
}}
document.writeln("GooD . The Value is Positive ");

+1 vote
Html javascript code for screen capture?

I want the javascript API which could capture the screen of the client. Does anyone knows about it?

+3 votes
Canvas Element in HTML 5?

How and When is it used?

...