html { font-size: 16px; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; } button { -webkit-appearance: none; -moz-appearance: none; background-color: #fff; border: none; cursor: pointer; } button:active { transform: scale(0.95); } button:focus { outline: none; } button::selection { background-color: transparent; } #main-button-container { display: flex; flex-flow: column; } #main-button-container button { padding: 10px; font-size: 6rem; display: flex; align-items: center; justify-content: center; height: 150px; width: 150px; color: #ccc; font-family: Font Awesome; } #main-button-container button.active { color: #000; } #main-button-container button:hover { text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff; } #main-button-container button:hover { color: #999; } #main-button-container button::before { content: "\F08D"; font-weight: 900; position: relative; top: 3px; } #main-button-container button::after { content: "\F05E"; position: absolute; font-weight: 300; color: #c00; opacity: 0.0; transform: scaleX(-1) scale(1.5); } #main-button-container button.active::after { opacity: 1.0; } #aux-button-container { display: flex; border-top: 1px solid #ddd; } .options-button { font-size: 1.125rem; padding: 10px; color: #777; width: 100%; font-family: Font Awesome, Inconsolata, sans-serif; } .options-button:hover { color: #000; } .options-button::before { content: "\F1DE"; font-family: Font Awesome; font-size: 0.875em; margin: 0 6px 0 0; } .options-button::after { content: "Options"; margin: 0 3px 0 0; }