Button by d4niz
#212121
1.contactButton { 2 background: #7079f0; 3 color: white; 4 font-family: inherit; 5 padding: 0.45em; 6 padding-left: 1em; 7 font-size: 17px; 8 font-weight: 500; 9 border-radius: 0.9em; 10 border: none; 11 cursor: pointer; 12 letter-spacing: 0.05em; 13 display: flex; 14 align-items: center; 15 box-shadow: inset 0 0 1.6em -0.6em #714da6; 16 overflow: hidden; 17 position: relative; 18 height: 2.8em; 19 padding-right: 3em; 20} 21 22.iconButton { 23 margin-left: 1em; 24 position: absolute; 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 height: 2.2em; 29 width: 2.2em; 30 border-radius: 0.7em; 31 box-shadow: 0.1em 0.1em 0.6em 0.2em #7a8cf3; 32 right: 0.3em; 33 transition: all 0.3s; 34} 35 36.contactButton:hover { 37 transform: translate(-0.05em, -0.05em); 38 box-shadow: 0.15em 0.15em #5566c2; 39} 40 41.contactButton:active { 42 transform: translate(0.05em, 0.05em); 43 box-shadow: 0.05em 0.05em #5566c2; 44} 45
11K views
11K views
Variations
2 MIT License