[Code] BonBon Buttons

  • blogger
    1. [Code] BonBon Buttons
    avatar MEM LV2

    BonBon Buttons






    Code:
    <nav class="demo">
          
          <a href="#" class="button">Button</a>
          <a href="#" data-icon="✆" class="button blue brackets">Call</a>
          <a href="#" data-icon="✰" class="button pink serif skew glossy">Stars</a>
          <a href="#" data-icon="✿" title="Reddit" class="button green serif back xl glass icon"></a>
          
          <br>
          
          <a href="#" data-icon="✍️" class="button green">Blog</a>
          <a href="#" data-icon="☺️" title="Love" class="button pink oval icon"></a>
          <a href="#" data-icon="✪" title="Quit" class="button orange shield xl glossy icon"></a>
          <a href="#" data-icon="" title="Upload" class="button blue back xl glass icon"></a>
          <a href="#" data-icon="✔️" title="RSS" class="button orange drop glass icon"></a>
          

       </nav>

    Code:
    /* Demo */

    .demo {
       text-align: center;
       padding: 60px;
       margin-top: 60px;
       margin-bottom: 50px;
       background-color: rgba(254,255,255,0.1);
       
       -webkit-box-shadow:     inset rgba(255,255,255,0.3) 0 2px 2px,  rgba(0,0,0,0.05) 0 2px 2px;
       -moz-box-shadow:        inset rgba(255,255,255,0.3) 0 2px 2px,  rgba(0,0,0,0.05) 0 2px 2px;
       -webkit-border-radius:    120px / 300px;
       -moz-border-radius:    120px / 300px;
    }

    /* -------------- THE button -------------- */
    .button {

    /* text */
       text-decoration:       none;
       font:                24px/1em 'Droid Sans', sans-serif;
       font-weight:          bold;
       text-shadow:          rgba(255,255,255,.5) 0 1px 0;
       -webkit-user-select:    none;
       -moz-user-select:       none;
       user-select:          none;
       
       
    /* layout */
       padding:             .5em .6em .4em .6em;
       margin:             .5em;
       display:             inline-block;
       position:             relative;
       
       -webkit-border-radius:    8px;
       -moz-border-radius:    8px;
       border-radius:    8px;
       
    /* effects */
       border-top:       1px solid rgba(255,255,255,0.8);
       border-bottom:       1px solid rgba(0,0,0,0.1);
       
       background-image:    -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
       background-image:    -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
       background-image:    gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);

       -webkit-transition: background .2s ease-in-out;
       -moz-transition:    background .2s ease-in-out;
       transition:       background .2s ease-in-out;
       
    /* color */
       color:             hsl(0, 0%, 40%) !important;
       background-color:    hsl(0, 0%, 75%);
       
       -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                      hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
                      rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       -moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                      hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
                      rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       box-shadow:          inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                      hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
                      rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    }

    /* -------------- button (tag) -------------- */

    button.button {
       border-left: none;
       border-right: none;
    }
    button.button:hover {
       cursor: pointer;
    }


    /* -------------- icon -------------- */
    .button:before {
       font:          1.2em/0 sans-serif;
       content:       attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
       margin-right: 6px;
    }


    /* icon only */
    .icon {
       font-weight: normal;
       font-style: normal;
    }
    .icon:before {
       display:       block;
       height:       .75em;
       line-height:    .75em;
       margin: 0;
    }



    /* -------------- colours -------------- */

    .button.orange {
       color:             hsl(39, 100%, 30%) !important;
       background-color:    hsl(39, 100%, 50%);

       -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       -moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       box-shadow:          inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    }
    .button.orange:hover {    background-color: hsl(39, 100%, 65%); }


    .button.blue {
       color:             hsl(208, 50%, 40%) !important;
       background-color:    hsl(208, 100%, 75%);
       
       -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px;   /* drop shadow */
       -moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px;   /* drop shadow */
       box-shadow:       inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px;   /* drop shadow */
    }
    .button.blue:hover {    background-color: hsl(208, 100%, 83%); }

    .button.green {
       color:             hsl(88, 70%, 30%) !important;
       background-color:    hsl(88, 70%, 60%);
       -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       -moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       box-shadow:          inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    }
    .button.green:hover {    background-color: hsl(88, 70%, 75%); }

    .button.pink {
       color:             hsl(340, 100%, 30%) !important;
       background-color:    hsl(340, 100%, 75%);
       -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       -moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
       box-shadow:       inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
                         hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
                         rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    }
    .button.pink:hover {    background-color: hsl(340, 100%, 83%); }



    .button.transparent {
       color:    rgba(0,0,0,0.5) !important;
    }
    .button.transparent, .button.transparent:hover, .button.transparent:active {
       background-color: transparent;
       background-image: none;
    }
    .button.transparent:hover {
       opacity: .9;
    }



    /* -------------- States -------------- */

    .button:hover {
       background-color:    hsl(0, 0%, 83%);
    }



    .button:active {
       background-image:    -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
       background-image:    -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
       background-image:    gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

       -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
                         rgba(0,0,0,0.4) 0 .1em 1px, /* border */
                         rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
       -moz-box-shadow:    inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
                         rgba(0,0,0,0.4) 0 .1em 1px, /* border */
                         rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
       box-shadow:       inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
                         rgba(0,0,0,0.4) 0 .1em 1px, /* border */
                         rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

       -webkit-transform:    translateY(.2em);
       -moz-transform:    translateY(.2em);
       transform:          translateY(.2em);
    }

    .button:focus {
       outline: none;
       color: rgba(254,255,255,0.9) !important;
       text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
    }

    .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
       opacity:          .5;
       cursor:          default;
       color:             rgba(0,0,0,0.2) !important;
       text-shadow:       none !important;
       background-color:    rgba(0,0,0,0.05);
       background-image:    none;
       border-top:       none;

       -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
                         rgba(0,0,0,0.3) 0 .1em 1px, /* border */
                         rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
       -moz-box-shadow:    inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
                         rgba(0,0,0,0.3) 0 .1em 1px, /* border */
                         rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
       box-shadow:       inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
                         rgba(0,0,0,0.3) 0 .1em 1px, /* border */
                         rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

       -webkit-transform:    translateY(5px);
       -moz-transform:    translateY(5px);
       transform:          translateY(5px);
    }

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết