Skip to content

Instantly share code, notes, and snippets.

Created October 15, 2020 04:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
📦 Button
<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 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"/>
<div class="--text">Track my package</div>
//Track My Package by Mauricio Bucardo
box-sizing: border-box
min-height: 100vh
display: flex
justify-content: center
align-items: center
background: #FF8774
font-family: 'Inter', sans-serif
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
position: relative
width: 60px
height: 60px
background: #FEDECF
float: left
position: absolute
top: 17px
left: 18px
transition: all .2s ease
position: absolute
top: 0px
left: 25px
opacity: 0
transition: all .2s ease
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
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
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
transform: translateY(9px) scale(.83333)
transform: translateY(11px)
opacity: 1
transition-delay: .15s
transform: scale(1)
transition-delay: .2s
transform: scale(1)
transition-delay: .25s
color: rgba(black,9)
transform: translateY(1px)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment