<!DOCTYPE html><html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Moisrex</title>
</head>
<body>
</body>
</html>
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
متن 1
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
متن 2
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
متن 3
</label>
</div>
<style>.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%,#6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%,#6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%,#6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%,#6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
-moz-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 15px Arial, Verdana, Geneva, sans-serif;
line-height: 41px;
padding-right: 20px;
}
.button:hover .inner {
opacity: .5;
}
.button input {
display: none;
}
.button input:checked + .outer .inner {
opacity: 1;
}
.button .outer {
background: #2989d8;
background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#2989d8), color-stop(99%,#101354));
background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%,#101354 99%);
background: -o-radial-gradient(center, ellipse cover, #2989d8 0%,#101354 99%);
background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%,#101354 99%);
background: radial-gradient(center, ellipse cover, #2989d8 0%,#101354 99%);
border: 1px solid black;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
display: block;
float: left;
height: 20px;
margin: 10px;
width: 20px;
}
.button .inner {
background: #e4f5fc;
background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));
background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
background: radial-gradient(center, ellipse cover, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
display: block;
height: 14px;
margin: 3px;
opacity: 0;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
width: 14px;
}</style>
حمایت شده:
