Button by Creatlydev
#e8e8e8
1.button { 2 text-decoration: none; 3 line-height: 1; 4 border-radius: 1.5rem; 5 overflow: hidden; 6 position: relative; 7 box-shadow: 10px 10px 20px rgba(0,0,0,.05); 8 background-color: #fff; 9 color: #121212; 10 border: none; 11 cursor: pointer; 12} 13 14.button-decor { 15 position: absolute; 16 inset: 0; 17 background-color: var(--clr); 18 transform: translateX(-100%); 19 transition: transform .3s; 20 z-index: 0; 21} 22 23.button-content { 24 display: flex; 25 align-items: center; 26 font-weight: 600; 27 position: relative; 28 overflow: hidden; 29} 30 31.button__icon { 32 width: 48px; 33 height: 40px; 34 background-color: var(--clr); 35 display: grid; 36 place-items: center; 37} 38 39.button__text { 40 display: inline-block; 41 transition: color .2s; 42 padding: 2px 1.5rem 2px; 43 padding-left: .75rem; 44 overflow: hidden; 45 white-space: nowrap; 46 text-overflow: ellipsis; 47 max-width: 150px; 48} 49 50.button:hover .button__text { 51 color: #fff; 52} 53 54.button:hover .button-decor { 55 transform: translate(0); 56}
3.9K views
3.9K views
MIT License