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