|
|
| (2 intermediate revisions by the same user not shown) |
| 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 {
| |
| --press-depth: 8px; /* how far it moves down on press */
| |
| --squash: 0.94; /* vertical squish on press */
| |
| position: relative;
| |
| display: inline-block;
| |
| border-radius: 10px; /* match your tile corners */
| |
| transition: transform 120ms ease, filter 120ms ease;
| |
| }
| |
|
| |
| /* Make the image fill the button area cleanly */
| |
| .ic-btn > img {
| |
| display: block;
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 10px;
| |
| pointer-events: none; /* so clicks hit the anchor */
| |
| }
| |
|
| |
| /* Bottom “shadow bar” that can slide down out of view */
| |
| .ic-btn::after {
| |
| content: "";
| |
| position: absolute;
| |
| left: 6%;
| |
| right: 6%;
| |
| height: 12px;
| |
| bottom: -8px; /* sits just below the tile */
| |
| background: rgba(0, 0, 0, 0.45);
| |
| border-radius: 8px;
| |
| filter: blur(0.5px);
| |
| transition: transform 120ms ease, opacity 120ms ease;
| |
| }
| |
|
| |
| /* Press state: move down, squish, and slide the shadow away */
| |
| .ic-btn:active,
| |
| .ic-btn.is-pressed {
| |
| transform: translateY(var(--press-depth)) scaleY(var(--squash));
| |
| transform-origin: top center; /* makes the top “scrunch” */
| |
| }
| |
|
| |
| .ic-btn:active::after,
| |
| .ic-btn.is-pressed::after {
| |
| transform: translateY(18px); /* slides shadow out of view */
| |
| opacity: 0;
| |
| }
| |
|
| |
| /* Optional: hover lift for mouse users */
| |
| .ic-btn:hover { transform: translateY(-1px); }
| |
| .ic-btn:hover::after { opacity: 0.55; }
| |
|
| |
| .ic-btn {
| |
| position: relative;
| |
| display: inline-block;
| |
| border-radius: 10px;
| |
| transition: transform 120ms ease, filter 120ms ease;
| |
| }
| |
|
| |
| .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 */
| |
| }
| |
|
| |
| /* keep your ::after shadow + pressed states as before */
| |