css笔记——css 实现自定义按钮

 

css实现自定义按钮的样式实际上很早就有了，只是会用的人不是很多，里面涉及到了最基础的css写法，在火狐中按钮还是会显示出来，这时需要将i标签的背景设置为白色，同时z-index设置比input高一些，这样才可以把按钮盖住，同时注意：background-color放在background后才起作用

/*自定义按钮 */
.invoice-class-type{
	position:relative;
	display:inline-block;
	width:120px;
	height:30px;
	line-height:30px;
	text-align: center;
}
.invoice-class-type>input[type="radio"]{
	position:absolute;
	display:block;
    height:1px;
    widht:1px;
    left:0;
    top:0;   
}
.invoice-class-type>input[type="radio"]+i{
    display:block;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    line-height:30px;
    width:120px;
    height:30px;
    border:1px solid #888; 
    border-radius:2px; 
    cursor:pointer;
    background-color:#fff;
}
.invoice-class-type>input[type="radio"]:checked+i{
	border-color:#f30026; 		
	background:url(../images/modify-img/red_right.png) no-repeat right bottom;
	background-color:#fff;
}
/*结束 自定义按钮*/

　　

　　

效果图：

 

又例如：单选按钮时只需要注意name属性就行

/*checkbox*/
.s-checkbox{
    position:relative;
    display: inline-block;
}
.shopping_table_check1{
	position:relative;
}
.shopping_table_check1>span:before{
	margin-top:20px;
}
input[type="radio"].custom-checkbox,
input[type="checkbox"].custom-checkbox{
        position: absolute;
        z-index: -100;
        height: 1px;
        width: 1px;
        top:0;
        left:0;
    }
input[type="radio"].custom-checkbox+span:before,
input[type="checkbox"].custom-checkbox+span:before{
    display: inline-block;
    content: "\a0";
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-weight:800;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border:1px solid #f30026;
    background-color:#fff; 
    color:#fff;     
}
input[type="radio"].custom-checkbox:checked+span:before,
input[type="checkbox"].custom-checkbox:checked+span:before{
    box-shadow:none;
    background-color:#f30026;
    content: "√";
}
/*结束  checkbox*/

 

效果图如下：

　　

　结合css3写炫酷按钮

   CSS  

.animate-checkbox{
            position: relative;
            display: inline-block;
            width:60px;
            height:30px;
            border-radius: 15px;
            background-color:#fff;
            box-shadow: 1px 0 3px #333; 
            margin-top: 30px;
            cursor: pointer;
        }
        .animate-checkbox input{
            position: absolute;
            top:0;
            left:0;
            height:1px;
            width:1px;
            z-index: 1;
        }
        .animate-checkbox i{
            position: absolute;
            left:0;
            top:0;
            background-color: #428bca;
            width:30px;
            height: 30px;
            border-radius: 15px;
            z-index: 2;
            transition: width linear .2s;
        }
        .animate-checkbox i:before{
            display: block;
            position: absolute;
            content:" ";
            left:0;
            top:0;
            width:30px;
            height: 30px;
            border-radius: 100%;
            background-color:#f30026;
            transition: left linear .2s; 
        }
        .animate-checkbox input[type="checkbox"]:checked+i{
            width:60px;
            transition: width linear .2s;
        }
        .animate-checkbox input[type="checkbox"]:checked+i:before{
            left:30px;
            transition: left linear .2s;
        }

   DOM  结果

<label class="animate-checkbox">
     <input type="checkbox" name="">
     <i></i>
</label>

   效果图

   没选中

   

   选中