This post is saved as a draft.
#e8e8e8
1.Btn { 2 display: flex; 3 align-items: center; 4 justify-content: flex-start; 5 width: 45px; 6 height: 45px; 7 border: none; 8 border-radius: 50%; 9 cursor: pointer; 10 position: relative; 11 overflow: hidden; 12 transition-duration: 0.3s; 13 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199); 14 background: rgb(255, 135, 65); 15 background: linear-gradient( 16 250deg, 17 rgba(255, 135, 65, 1) 15%, 18 rgba(255, 65, 65, 1) 65% 19 ); 20} 21 22/* plus sign */ 23.sign { 24 width: 100%; 25 transition-duration: 0.3s; 26 display: flex; 27 align-items: center; 28 justify-content: center; 29} 30 31.sign svg { 32 width: 17px; 33} 34 35.sign svg path { 36 fill: white; 37} 38/* text */ 39.text { 40 position: absolute; 41 right: 0%; 42 width: 0%; 43 opacity: 0; 44 color: white; 45 font-size: 1.2em; 46 font-weight: 600; 47 transition-duration: 0.3s; 48} 49/* hover effect on button width */ 50.Btn:hover { 51 width: 125px; 52 border-radius: 40px; 53 transition-duration: 0.3s; 54} 55 56.Btn:hover .sign { 57 width: 30%; 58 transition-duration: 0.3s; 59 padding-left: 20px; 60} 61/* hover effect button's text */ 62.Btn:hover .text { 63 opacity: 1; 64 width: 70%; 65 transition-duration: 0.3s; 66 padding-right: 10px; 67} 68/* button click effect*/ 69.Btn:active { 70 transform: translate(2px, 2px); 71} 72
Variation of abutton
Variation of abutton