Button by catraco
#e8e8e8
1.btn-class-name { 2 --primary: 255, 90, 120; 3 --secondary: 150, 50, 60; 4 width: 60px; 5 height: 50px; 6 border: none; 7 outline: none; 8 cursor: pointer; 9 user-select: none; 10 touch-action: manipulation; 11 outline: 10px solid rgb(var(--primary), .5); 12 border-radius: 100%; 13 position: relative; 14 transition: .3s; 15} 16 17.btn-class-name .back { 18 background: rgb(var(--secondary)); 19 border-radius: 100%; 20 position: absolute; 21 left: 0; 22 top: 0; 23 width: 100%; 24 height: 100%; 25} 26 27.btn-class-name .front { 28 background: linear-gradient(0deg, rgba(var(--primary), .6) 20%, rgba(var(--primary)) 50%); 29 box-shadow: 0 .5em 1em -0.2em rgba(var(--secondary), .5); 30 border-radius: 100%; 31 position: absolute; 32 border: 1px solid rgb(var(--secondary)); 33 left: 0; 34 top: 0; 35 width: 100%; 36 height: 100%; 37 display: flex; 38 justify-content: center; 39 align-items: center; 40 font-size: 1.2rem; 41 font-weight: 600; 42 font-family: inherit; 43 transform: translateY(-15%); 44 transition: .15s; 45 color: rgb(var(--secondary)); 46} 47 48.btn-class-name:active .front { 49 transform: translateY(0%); 50 box-shadow: 0 0; 51}
15K views
15K views
MIT License