#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 /* New variables */ 15 --gradient-color-1: #8360c3; 16 --gradient-color-2: #2ebf91; 17 display: block; 18 box-sizing: border-box; 19 border: 2px solid var(--button_outline_color); 20 border-radius: var(--button_radius); 21 padding: 0.75em 1.5em; 22 background: linear-gradient(to bottom, var(--gradient-color-1), var(--gradient-color-2)); 23 color: var(--button_outline_color); 24 transform: translateY(-0.2em); 25 transition: transform 0.1s ease; 26} 27 28button:hover .button_top { 29 /* Pull the button upwards when hovered */ 30 transform: translateY(-0.33em); 31} 32 33button:active .button_top { 34 /* Push the button downwards when pressed */ 35 transform: translateY(0); 36}
Comments
MIT License