📦 Button

button.markdown

📦 Button

A Pen by Andreas Storm on CodePen.

License.

index.html

<a href="#" class="btn-track">
  <div class="--icon">
    <div class="circle-inner"></div>
    <div class="circle-outer"></div>
    <svg width="24" height="24" viewBox="0 0 24 24" id="box">
    <path d="M0 6L5 0H19L24 6V11H0V6Z" fill="#FDDDB3"/>
    <path d="M0.835938 5L5 0H11.5L10 5H0.835938ZM12.5 0L14 5H23.1667L19 0H12.5ZM0 22.5V6H10V10.5L12 9.5L14 10.5V6H24V22.5C24 23.3284 23.3284 24 22.5 24H1.5C0.671573 24 0 23.3284 0 22.5Z" fill="#B39056"/>
    <rect x="6" y="13" width="12" height="3" rx="0.25" fill="white"/>
  </svg>
  <svg width="10" height="14" viewBox="0 0 10 14" id="pin">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 14C6.5 14 10 8.5 10 5C10 1.5 7.76142 0 5 0C2.23858 0 0 1.5 0 5C0 8.5 3.5 14 5 14ZM4.99998 7.5C6.38069 7.5 7.49998 6.38071 7.49998 5C7.49998 3.61929 6.38069 2.5 4.99998 2.5C3.61927 2.5 2.49998 3.61929 2.49998 5C2.49998 6.38071 3.61927 7.5 4.99998 7.5Z" fill="#DE6D56"/>
    </svg>
  </div>
  <div class="--text">Track my package</div>
</a>

script.js

//Track My Package by Mauricio Bucardo
//https://dribbble.com/shots/13107114-Track-My-Package

style.stylus

*
  box-sizing: border-box

body
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  background: #FF8774
  font-family: 'Inter', sans-serif
  
.btn-track
  position: relative
  text-decoration: none
  overflow: hidden
  background: white
  box-shadow: 0 8px 20px -6px rgba(black, .3)
  border-radius: 8px
  transition: all .1s ease
  .--icon
    position: relative
    width: 60px
    height: 60px
    background: #FEDECF
    float: left
    #box
      position: absolute
      top: 17px
      left: 18px
      transition: all .2s ease
    #pin
      position: absolute
      top: 0px
      left: 25px
      opacity: 0
      transition: all .2s ease
    .circle-inner
      position: absolute
      width: 40px
      height: 40px
      border-radius: 20px
      background: rgba(white,.9)
      margin: 10px
      box-shadow: 0 1px 2px rgba(black,.1)
      transform: scale(0)
      transition: all .3s ease
    .circle-outer
      position: absolute
      margin: 4px
      width: 52px
      height: 52px
      border-radius: 26px
      background: rgba(white,.5)
      box-shadow: 0 1px 2px rgba(black,.05)
      transform: scale(0)
      transition: all .3s ease
        
      
  .--text
    float: left
    color: black
    white-space: nowrap
    line-height: 20px
    height: 60px
    padding: 20px
    border-radius: 0 8px 8px 0
    font-size: 16px
    font-weight: 500
    
  &:hover
    .--icon
      #box
        transform: translateY(9px) scale(.83333)
      #pin
        transform: translateY(11px)
        opacity: 1
        transition-delay: .15s
      .circle-inner
        transform: scale(1)
        transition-delay: .2s
      .circle-outer
        transform: scale(1)
        transition-delay: .25s
    .--text
       color: rgba(black,9) 
       
  &:active
    transform: translateY(1px)