Button by catraco
#212121
1.btn-class-name { 2 --color: 180,255, 100; 3 border-radius: .5em; 4 transition: .3s; 5 background-color: rgba(var(--color), .2); 6 color: rgb(var(--color)); 7 fill: rgb(var(--color)); 8 font-family: monospace; 9 font-weight: bolder; 10 font-size: x-large; 11 text-transform: uppercase; 12 letter-spacing: 0.1em; 13 cursor: pointer; 14 border: 2px solid rgb(var(--color)); 15 box-shadow: 0 0 10px rgba(var(--color), .4); 16 outline: none; 17 display: flex; 18 align-items: center; 19 padding: .5em 1em; 20} 21 22.btn-class-name:hover { 23 box-shadow: 0 0 0 5px rgba(var(--color), .5); 24} 25 26.btn-class-name span { 27 transform: scale(.8); 28 transition: .3s; 29} 30 31.btn-class-name:hover span { 32 transform: scale(1); 33} 34 35.btn-class-name svg { 36 font-size: 0; 37 transform: scale(0.5) translateX(0%) rotate(-180deg); 38 transition: .3s; 39} 40 41.btn-class-name:hover svg { 42 font-size: 20px; 43 transform: scale(1) translateX(20%) rotate(0deg); 44} 45 46.btn-class-name:active { 47 transition: 0s; 48 box-shadow: 0 0 0 5px rgb(var(--color)); 49}
775 views
775 views
Variations
1 MIT License