Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Code] BonBon Buttons

Tác giả: - vào lúc:
blogger
Bài viết : 88
Points : 236
Like : 36
blogger
An toàn
bloggerMEM LV2
9/28/2016, 10:28
#1

BonBon Buttons


[Code] BonBon Buttons YYQoUqL



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);
}