CSS: کلید زیبای روشن و خاموش
#1
Note 
سلام
این یه کلید بسیاز زیبای روشن و خاموشه حتما ببینید

[HTML]<div class="container"> <input type="checkbox" id="power" name="power" /> <label for="power" class="power"> <span class="icon-off"></span> <span class="light"></span> </label></div>[/HTML]


[CSS]body { background-color: #1b1b1b;
}
.container {
width : 150px;
height : 130px;
padding-top : 20px;
margin : 50px auto ;
}


#power {
display : none;
}


label {
display : block;
width : 100px;
height : 100px;
border-radius : 50%;
position : relative;
margin : auto;
border : 4px solid #636679;
background : -webkit-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
background : -moz-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
background : radial-gradient(center , ellipse cover, #fefefe 0% , #EEE 80% , #FFF 100%);
box-shadow : inset 0 -5px 10px 0 #d0d5eb , inset 0 5px 10px 0 #FFF , 0 0 0 1px #333;
cursor : pointer;
text-align : center;
font-size : 40px;
color : #0f0;
line-height : 100px;
text-shadow : -1px -1px 0px #FFF , 1px 1px 0px #FFF;
transition : all .1s ease-in-out;
}


label:after , label:before {
display : block;
content : "";
position: absolute;
}


label:before {
width : 150px;
height : 150px;
border-radius : 20px;
background : -webkit-linear-gradient(top, #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
background : -moz-linear-gradient(top, #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
background : linear-gradient(top, #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
box-shadow : 0 10px 30px 0 #000 ;
top : -25px;
left : -25px;
z-index : -2;
}


label:after {
width : 130px;
height : 130px;
border-radius : 50%;
background : #fff;
top : -15px;
left : -15px;
z-index : -1;
box-shadow : 0 -2px 5px 0px #fefefe , 0 2px 5px 0 #ccc;
background: rgb(210,215,237);
background: -webkit-linear-gradient(top, #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
background: -moz-linear-gradient(top, #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
background: linear-gradient(top, #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
}


.light {
display : block;
width : 12px;
height : 12px;
position : absolute;
top : -12px;
right : -12px;
background : -webkit-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
background : -moz-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
background : radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
box-shadow : inset 0 1px 1px 0 #333 ,inset 0 -1px 1px 0 #333 , 0 0 5px 1px #bade32;
border-radius : 50%;
transition : all .1s ease-in-out;
}


.icon-off {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
margin : auto;
width : 40px;
height : 40px;
border-radius : 50%;
background : #d6f804;
box-shadow : inset 0 0 4px 0 #999;
transition : all .1s ease-in-out;
}


.icon-off:after {
display : block;
content : '';
position : absolute;
top : 0; bottom : 0;
left : 0; right : 0;
margin : auto;
width : 26px;
height : 26px;
border-radius : 50%;
background : #eee;
box-shadow : 0 0 3px 0 #999;
z-index : 2;
}


.icon-off:before {
display : block;
content : '';
position : absolute;
top : -5px;
left : 0; right : 0;
margin : auto;
width : 8px;
height : 25px;
background : #d6f804;
box-shadow : inherit;
border-radius : 10px;
border-style : solid;
border-width : 0 3px 0;
border-color : #EEE;
z-index : 3;
transition : all .1s ease-in-out;
}


#power:checked + label {
background : -webkit-radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
background : radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
background : radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
box-shadow : inset 0 -5px 10px 0 #aaa , inset 0 5px 10px 0 #aaa , 0 0 0 1px #333;
transition : all .1s linear;

}


#power:checked + label .light {
background : -webkit-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
background : -moz-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
background : radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
box-shadow : inset 0 1px 1px 0 #555 ,inset 0 -1px 1px 0 #555 , 0 0 5px 0 #f55;
transition : all .1s linear;
}


#power:checked + label .icon-off {
background : transparent;
box-shadow : inset 0 0 5px 0 #777;
transition : all .1s linear;
}


#power:checked + label .icon-off:after {
background : inherit;
box-shadow : 0 0 5px 0 #777;
}


#power:checked + label .icon-off:before {
background : #ddd;
border-color : #dfdfdf;
box-shadow : inherit;
transition : all .1s linear;
} [/CSS]

Button - CodePen

پاسخ
#2
Note 
خیلی جالب بود
طرف ایرانی بوده مثل اینکه :iran flag:

چطور امضا کنم؟  Huh
پاسخ
#3
Note 
با تشکر
کارهای بیشتر رو میتونید در مرکز آموزش ببینید.
موفق باشید Confusedmilingsmiley:

پاسخ
#4
Note 
با تشکر
کارهای بیشتر رو میتونید در مرکز آموزش ببینید.
موفق باشید Confusedmilingsmiley:

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  سوال مشکل نمایش در منو زیر مجموعه سطح چهارم blackwizard 0 121 30-06-2016 ساعت 19:27
آخرین ارسال: blackwizard
Note 7 افکت بسیار زیبای CSS THE KNIGHT 2 785 26-09-2014 ساعت 16:09
آخرین ارسال: saber2
Note افکت زیبا برای ساخت دکمه در css WWWorker 0 345 20-09-2014 ساعت 21:12
آخرین ارسال: WWWorker
Note دانلود لودینگ های بسیار زیبا (CSS) WWWorker 3 724 23-08-2014 ساعت 19:08
آخرین ارسال: a.z.n
Note دکمه دانلود زیبا با CSS3 Daniel 2 610 14-03-2014 ساعت 23:40
آخرین ارسال: PHP.sec
Note Tooltip زیبا با CSS Daniel 1 440 09-01-2014 ساعت 11:56
آخرین ارسال: AnimeIraN
Note افکت های زیبای CSS SOFTAFZAR 0 694 11-01-2013 ساعت 19:11
آخرین ارسال: SOFTAFZAR

کاربرانِ درحال بازدید از این موضوع:   1 مهمان