#e8e8e8
1button { 2 /* Variables */ 3 --button_radius: 0.75em; 4 --button_color: #e8e8e8; 5 --button_outline_color: #000000; 6 font-size: 17px; 7 font-weight: bold; 8 border: none; 9 border-radius: var(--button_radius); 10 background: var(--button_outline_color); 11} 12 13.button_top { 14 display: block; 15 box-sizing: border-box; 16 border: 2px solid var(--button_outline_color); 17 border-radius: var(--button_radius); 18 padding: 0.75em 1.5em; 19 background: linear-gradient(to bottom right, #FFCC99, #FF9966); 20 color: var(--button_outline_color); 21 transform: translateY(-0.2em); 22 transition: transform 0.1s ease; 23} 24 25button:hover .button_top { 26 /* Pull the button upwards when hovered */ 27 transform: translateY(-0.33em); 28} 29 30button:active .button_top { 31 /* Push the button downwards when pressed */ 32 transform: translateY(0); 33}
Comments
MIT License