CSS Heading Buttons 3D with some relief

css-heading-buttons-3d-with-some-relief.markdown

CSS Heading Buttons 3D with some relief

A set of heading buttons with some relief with shadow 3d effect

A Pen by Antonio Garcia on CodePen.

License.

index.pug

.content
  .holder
    each title in ['One', 'Two', 'Three', 'Four'] 
      .button
        .box
        .wrap
          h2= title
        .description
          h3 HEADING
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu augue dictum, tempor lacus id, gravida purus.

style.sass

@import url('https://fonts.googleapis.com/css?family=Economica&display=swap')
html, body
  margin: 0
  padding: 0
body
  position: relative
  width: 100%
  font-family: Economica
  background-color: #ddd
.content
  display: block
  margin: auto
  width: 80%
  background-color: #ddd

.holder
  padding-top: 50px
  
$r: 50px
$p: 20px
$h: 100px
$b: 20px
.button
  position: relative
  width: 80%
  height: $h
  margin: 0 auto  
  padding: 0px  
  text-align: left
  padding-left: $p      
  z-index: 2  
  .wrap    
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    border-radius: $r 0 0 $r
    background-image: linear-gradient(to left, #ddd 40%, #fff 60%)
    z-index: 9
  .box
    position: absolute
    left: 40px
    top: 0
    right: 40%
    bottom: 0
    z-index: -1
    opacity: .5
    filter: blur(8px)    
    &::before
      position: absolute
      left: 0
      top: 90%
      width: 100%
      height: 80%
      content: ''
      background-image: linear-gradient(to right, rgba(#000,0) 0%,rgba(#000,.76) 60%,  rgba(#000,1) 100%)      
      clip-path: polygon(100% 0, 0% 100%, 0 0)        
      box-shadow: 0 0 10px rgba(#000,1)
  h2
    position: absolute
    display: block
    left: $b/2
    top: $b/2
    width: $h - $b
    height: $h - $b
    background-color: red
    margin: 0
    padding: 0
    line-height: $h - $b
    text-align: center
    border-radius: $h/2
    box-shadow: inset 7px 7px 10px rgba(#000,.5)         
  &:nth-child(2n)            
    .wrap      
      border-radius: 0 $r $r 0
      background-image: linear-gradient(to right, #ddd 40%, #fff 60%)
    h2
      left: auto
      right: $b/2
      box-shadow: inset -7px 7px 10px rgba(#000,.5)
    .box      
      left: 40%      
      right: 0
      bottom: 0   
      transform: scaleX(-1)
      
.button:nth-child(1)
  z-index: 4
  h2
    background-color: blue
    color: #FFF
    
.button:nth-child(2)
  z-index: 3
  h2
    background-color: red
    color: #FFF 
    
.button:nth-child(3)
  z-index: 2
  h2
    background-color: green
    color: #FFF
    
.button:nth-child(4)
  z-index: 1
  h2
    background-color: orange
    color: #FFF
    
.button
  .description
    position: absolute
    padding-top: 12px
    width: 50%
    z-index: 10
    left: 50%
    text-align: left
    transform: translateX(-50%)
    h3
      margin: 0
      padding: 0
      letter-spacing: 0.15em
    p
      margin: 8px 0 0 0
      padding: 0
  &:nth-child(2n)
    .description
      text-align: right