We would like to know how to create Responsive CSS round button.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.round-button {<!-- w w w. j a v a 2 s .co m-->
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;
}
</style>
</head>
<body>
<div class="round-button">
<div class="round-button-circle">
<a href="http://java2s.com" class="round-button">OK</a>
</div>
</div>
</body>
</html>
The code above is rendered as follows: