/* ---------------------------------------------------- Marc's cool custom buttons (v1.0.7 finally out of beta!) ..for Time Out Sports Updated: 2025-02-07 ---------------------------------------------------- */ /* -- DEFAULT collections buttons ('pushable') ----- */ .pushable { background: hsl(360, 0%, 80%); border: none; border-radius: 12px; padding: 0; margin: 4px; cursor: pointer; vertical-align: middle; /* vertically aligns 'button' container */ } .front { width: 170px; height: 44px; /* to fully align single/multi-line text.. */ display: grid; align-items: center; /* --------------------------------------- */ /* --------------------------------------- TRY #1 (only works well for 1-line text): line-height: 44px;  (successful workaround: set 'line-height' to same as 'height' to vertically center text) display: inline-block; TRY #2 (not horizontally aligned): display: flex; (Use a flexbox layout) flex-direction: row; (Make a horizontal flexbox - the default) (The important part: vertically center the items..) align-items: center; align: center; text-align: center; --------------------------------------- */ padding: 0px 0px; /* was 10px 35px */ border-radius: 6px; font-size: 1rem; background: hsl(0, 0%, 0%); color: white; transform: translateY(-4px); } .pushable:active .front { transform: translateY(-2px); } .pushable:focus:not(:focus-visible) { outline: none; } .front { transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .pushable:hover .front { transform: translateY(-6px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); color: #000099; background: hsl(0, 0%, 75%); } .pushable:active .front { transform: translateY(-2px); transition: transform 34ms; } /* -- Size / Age Group buttons --------------------- */ .pushableAG { background: hsl(360, 0%, 80%); border: none; border-radius: 12px; padding: 0; margin: 4px; cursor: pointer; vertical-align: middle; /* vertically aligns 'button' container */ } .frontAG { width: 170px; height: 44px; /* to fully align single/multi-line text.. */ display: grid; align-items: center; /* --------------------------------------- */ padding: 0px 0px; /* was 10px 35px */ border-radius: 6px; font-size: 1rem; background: hsl(0, 0%, 40%); color: white; transform: translateY(-4px); } .pushableAG:active .frontAG { transform: translateY(-2px); } .pushableAG:focus:not(:focus-visible) { outline: none; } .frontAG { transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .pushableAG:hover .frontAG { transform: translateY(-6px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); color: #000099; background: hsl(0, 0%, 75%); } .pushableAG:active .frontAG { transform: translateY(-2px); transition: transform 34ms; } /* -- 'back' buttons (within brackets) ------------- */ .pushableBK { background: hsl(360, 0%, 80%); border: none; border-radius: 12px; padding: 0; margin: 4px; cursor: pointer; vertical-align: middle; /* vertically aligns 'button' container */ } .frontBK { width: 170px; height: 44px; /* to fully align single/multi-line text.. */ display: grid; align-items: center; /* --------------------------------------- */ padding: 0px 0px; /* was 10px 35px */ border-radius: 6px; font-size: 1rem; background: hsl(0, 0%, 85%); color: #7777aa; transform: translateY(-4px); } .pushableBK:active .frontBK { transform: translateY(-2px); } .pushableBK:focus:not(:focus-visible) { outline: none; } .frontBK { transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .pushableBK:hover .frontBK { transform: translateY(-6px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); color: #000099; background: hsl(0, 0%, 75%); } .pushableBK:active .frontBK { transform: translateY(-2px); transition: transform 34ms; } /* ------------------------------------------------- */ /* -- Size Chart button ---------------------------- */ .scBtn { background: hsl(243, 100%, 68%); border: none; border-radius: 12px; padding: 0; margin: 4px; cursor: pointer; } .frontSC { min-width: 170px; /* width: max-content !important; */ /* (commented out 'cause it looks funny in Firefox) */ display: block; padding: 10px 35px; border-radius: 6px; font-size: 1rem; background: hsl(0, 0%, 0%); color: white; transform: translateY(-4px); } .scBtn:active .frontSC { transform: translateY(-2px); } .scBtn:focus:not(:focus-visible) { outline: none; } .frontSC { transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .scBtn:hover .frontSC { transform: translateY(-6px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); color: #ffff00; background: hsl(243, 100%, 50%); } .scBtn:active .frontSC { transform: translateY(-2px); transition: transform 34ms; } /* -- Size Chart Pop-Up 'previous' and 'next btns -- */ .scBtnPN { background: hsl(243, 100%, 68%); border: none; border-radius: 12px; padding: 0; margin: 4px; cursor: pointer; } .frontSCPN { min-width: 50px; width: max-content !important; display: block; padding: 5px 20px; border-radius: 4px; font-size: 1rem; background: hsl(0, 0%, 0%); color: white; transform: translateY(-4px); } .scBtnPN:active .frontSCPN { transform: translateY(-2px); } .scBtnPN:focus:not(:focus-visible) { outline: none; } .frontSCPN { transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .scBtnPN:hover .frontSCPN { transform: translateY(-4px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); color: #ffff00; background: hsl(243, 100%, 50%); } .scBtnPN:active .frontSCPN { transform: translateY(-2px); transition: transform 34ms; } /* ------------------------------------------------- */