This is cute :) One nitpick: the buttons grow slightly when they're being clicked. This is happening because of the style adding a dotted border around the nes

This is cute :) One nitpick: the buttons grow slightly when they're being clicked. This is happening because of the style adding a dotted border around the nested .btn-text element: .btn:not(:disabled):not(.disabled):active .btn-text, .btn:not(:disabled):not(.disabled):active:focus .btn-text { border: 1px dotted #000; } There's no border in the non-active style, so that allocates an extra 1px on each side of the text box. It'll work better if you use outline instead of border, or add an invisible border of the same size when the button isn't active.