CodePen

HTML

            
              <div class="btn glossy1">
 <span>Download</span>
</div>

<div class="btn glossy2">
 <span>Download</span>
</div>

<div class="btn glossy3">
 <span>Download</span>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
@mixin glossy($base-color: #676767)
    $lightnessFactor: lightness($base-color)
    $gradientOpacity: 0.05 + 0.3 * ($lightnessFactor / 100) 
    $innerglow: inset 0 0 17px rgba(255,255,190,.41)
    $dropshadow: 0 2px 1px rgba(0,0,0,.2)  
    border: solid 1px adjust-color($base-color, $lightness: 10%)
    +box-shadow($dropshadow, $innerglow )
    background-color: $base-color
    
    @if $lightnessFactor < 50
        // Gradient with fixed opacity
        +background-image(linear-gradient(top, rgba(white,0.15) 0, rgba(white,0.10) 50%, rgba(white,0) 51% ) )
      
    @else
        // Gradient with dynamic opacity
        +background-image(linear-gradient(top, rgba(white,$gradientOpacity) 0, rgba(white,$gradientOpacity - 0.05) 50%, rgba(white,0) 51% ) )

.btn 
    float: left 
    width: 150px
    margin: 15px
    padding: 1rem 0.5rem
    font-size: 1rem
    text-align: center
    text-transform: uppercase
    line-height: 1em
    color: white
  
.glossy1
    +glossy(black)
  
.glossy2
    +glossy(#676767)

.glossy3
    +glossy(#ff0066)
  
    




            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................