单选按钮的样式制作

在网上我们经常看到各种各样的单选复选按钮的样式,都很美观大方,那么它们到底是怎样制作的呢,今天我也找了一个按钮样式,决定制作一个给大家研究以下,并附上源码,按钮如下:

首先我们需要写出html代码

<label>
	<input type="radio" name="tab" />
	<span class="box">	<!--最外层的圆-->
		<span class="box1">		<!--蓝色小圆-->
			<span class="box-content"></span>	<!--被选中后的小白圆-->
		</span>
	</span>
</label>
<label>
	<input type="radio" name="tab" />
	<span class="box">
		<span class="box1">
			<span class="box-content"></span>
		</span>
	</span>
</label>
<label>
	<input type="radio" name="tab" />
	<span class="box">
		<span class="box1">
			<span class="box-content"></span>
		</span>
	</span>
</label>

然后附上css样式

<style>
	label{
		float: left;
		margin: 0 10px;
		position: relative;
		overflow: hidden;
	}
	label input{
		position: absolute;		/*设置相对定位,将原有按钮移出边框并隐藏*/
		top: -20px;
		left: -20px;
	}
	label .box{
		display: block;
		width: 30px;
		height: 30px;
		border-radius: 30px;
		color: #;
		background: linear-gradient( #2b2b2b 20%,#ccc,100%);
		background: -webkit-linear-gradient(#2b2b2b 20%,#ccc 100%);
		box-sizing: border-box;
		padding-top:4px;
	}
	label .box .box1{
		display: block;
		width: 22px;
		height: 22px;
		margin: 0px auto;
		background: #1fb7c4;
		border-radius: 10px;
		padding: 3px;
		box-sizing: border-box;
	}
	label .box .box1 .box-content{
		display: none;
		width: 15px;
		height: 15px;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 8px;
	}
	label input:checked~.box .box1 .box-content{	/*当按钮被选中时做样式的变化*/
		display: block;
	}
	
</style>  

完成时按钮如下

以上就是我为大家展示的代码,大家可以自己制作一个属于自己的按钮样式哦!

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦