Template:CS button/styles.css: Difference between revisions
Appearance
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* The wrapper |
/* The wrapper controls width; child link gets button styling */ |
||
.capsach-btn { |
|||
.capsach-btn { display:inline-block; width:278px; max-width:100%; box-sizing:border-box; } |
|||
display:inline-block; |
|||
width:278px; |
|||
max-width:100%; |
|||
box-sizing:border-box; |
|||
margin:1em 0; /* added: space above and below */ |
|||
} |
|||
/* Button |
/* Button appearance on inner anchor/span */ |
||
.capsach-btn > a, |
.capsach-btn > a, |
||
.capsach-btn > .capsach-btn__inner { |
.capsach-btn > .capsach-btn__inner { |
||
display:block; |
display:block; |
||
padding:.2em 1.5em; |
padding:.2em 1.5em; |
||
font: inherit; /* |
font: inherit; /* use CapSach site font */ |
||
font-weight:600; /* make text bold */ |
font-weight:600; /* make text bold */ |
||
color:#202122; |
color:#202122; |
||
| Line 21: | Line 27: | ||
.capsach-btn > a:hover, |
.capsach-btn > a:hover, |
||
.capsach-btn > .capsach-btn__inner:hover { |
.capsach-btn > .capsach-btn__inner:hover { |
||
background-color:#FFDD00; |
|||
} |
|||
.capsach-btn > a:active, |
.capsach-btn > a:active, |
||
.capsach-btn > .capsach-btn__inner:active { |
.capsach-btn > .capsach-btn__inner:active { |
||
background-color:#F0C800; |
|||
transform:translateY(1px); |
|||
} |
|||
/* Mobile-only full width (opt-in |
/* Mobile-only full width (opt-in) */ |
||
@media (max-width:720px){ |
@media (max-width:720px){ |
||
.capsach-btn--mobile { display:block; width:100% !important; } |
.capsach-btn--mobile { display:block; width:100% !important; } |
||
} |
} |
||
/* alignment helpers |
/* alignment helpers */ |
||
.capsach-align { text-align:left; } |
.capsach-align { text-align:left; } |
||
.capsach-align-right { text-align:right; } |
.capsach-align-right { text-align:right; } |
||
Revision as of 13:24, 13 October 2025
/* The wrapper controls width; child link gets button styling */
.capsach-btn {
display:inline-block;
width:278px;
max-width:100%;
box-sizing:border-box;
margin:1em 0; /* added: space above and below */
}
/* Button appearance on inner anchor/span */
.capsach-btn > a,
.capsach-btn > .capsach-btn__inner {
display:block;
padding:.2em 1.5em;
font: inherit; /* use CapSach site font */
font-weight:600; /* make text bold */
color:#202122;
background-color:#FEE330;
text-decoration:none;
border:none;
border-radius:9999px;
text-align:center;
white-space:nowrap;
transition:background-color .15s, transform .05s;
cursor:pointer;
}
.capsach-btn > a:hover,
.capsach-btn > .capsach-btn__inner:hover {
background-color:#FFDD00;
}
.capsach-btn > a:active,
.capsach-btn > .capsach-btn__inner:active {
background-color:#F0C800;
transform:translateY(1px);
}
/* Mobile-only full width (opt-in) */
@media (max-width:720px){
.capsach-btn--mobile { display:block; width:100% !important; }
}
/* alignment helpers */
.capsach-align { text-align:left; }
.capsach-align-right { text-align:right; }
.capsach-align-center { text-align:center; }
.capsach-align-left { text-align:left; }