|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
| /* Ironclad pressable buttons */
| |
| .ic-btn {
| |
| display: inline-block;
| |
| overflow: hidden; /* clips the bottom edge when pressed */
| |
| border-radius: 10px; /* match button art corners */
| |
| line-height: 0; /* removes unwanted gap around inline images */
| |
| }
| |
|
| |
| /* Link and image inside the button */
| |
| .ic-btn > a,
| |
| .ic-btn img {
| |
| display: block;
| |
| border-radius: 10px;
| |
| }
| |
|
| |
| .ic-btn img {
| |
| width: 100%;
| |
| height: auto;
| |
| pointer-events: none; /* clicks go to the link, not the image */
| |
| }
| |
|
| |
| /* Animation target is the link itself */
| |
| .ic-btn > a {
| |
| transition: transform 120ms ease;
| |
| transform-origin: top center;
| |
| }
| |
|
| |
| /* Pressed state — moves down and squashes slightly from the top */
| |
| .ic-btn:active > a,
| |
| .ic-btn.is-pressed > a {
| |
| transform: translateY(8px) scaleY(0.94);
| |
| }
| |
|
| |
| /* No hover effect at all */
| |
| .ic-btn:hover,
| |
| .ic-btn:hover > a {
| |
| /* intentionally empty to prevent hover animations */
| |
| }
| |
|
| |
| /* Row for the social buttons */
| |
| .ic-btn-row {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| width: 420px; /* same as your design */
| |
| margin-bottom: 20px;
| |
| }
| |
|
| |
| /* Each tile width so they flow 2 per row */
| |
| .ic-btn-row .ic-btn {
| |
| width: 200px;
| |
| }
| |
Latest revision as of 22:24, 11 August 2025
/* CSS placed here will be applied to all skins */