• 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 219 30-06-2016 ساعت 19:27
    آخرین ارسال: blackwizard
    Note 7 افکت بسیار زیبای CSS THE KNIGHT 2 955 26-09-2014 ساعت 16:09
    آخرین ارسال: saber2
    Note افکت زیبا برای ساخت دکمه در css WWWorker 0 463 20-09-2014 ساعت 21:12
    آخرین ارسال: WWWorker
    Note دانلود لودینگ های بسیار زیبا (CSS) WWWorker 3 938 23-08-2014 ساعت 19:08
    آخرین ارسال: a.z.n
    Note دکمه دانلود زیبا با CSS3 Daniel 2 858 14-03-2014 ساعت 23:40
    آخرین ارسال: PHP.sec
    Note Tooltip زیبا با CSS Daniel 1 588 09-01-2014 ساعت 11:56
    آخرین ارسال: AnimeIraN
    Note افکت های زیبای CSS SOFTAFZAR 0 793 11-01-2013 ساعت 19:11
    آخرین ارسال: SOFTAFZAR

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