Template:CS button/styles.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1:
/* The wrapper controls width; child link gets button styling */
.capsach-btn {
display:inline-block;
width:278px; /* default; override via |width= */
max-width:100%;
box-sizing:border-box;
margin:0.5em 0; /* added: space above and below */
}
 
/* Button appearance on inner anchor/span */
.capsach-btn:link > a,
.capsach-btn > .capsach-btn__inner {
display:block;
padding:.2em 1.5em;
font: inherit; /* use CapSach site font */
font-weight:600;
color:#202122;
background-color:#FEE330; /* flat color */
backgroundtext-imagedecoration:none;
border:none;
border-radius:9999px; /* pill */
text-decoration:none; /* kill underline on links */
box-sizing:border-box;
text-align:center;
white-space:nowrap;
Line 17 ⟶ 24:
cursor:pointer;
}
.capsach-btn:link,
.capsach-btn:visited { color:#202122; text-decoration:none; }
 
.capsach-btn:hover > { background-colora:#FFDD00; }hover,
.capsach-btn:active {> background.capsach-colorbtn__inner:#F0C800;hover transform:translateY(1px); }{
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 via |mobile=full) */
@media (max-width:720px){
.capsach-btn--mobile { display:block; width:100% !important; }
}
 
/* alignment helpers */
.capsach-align { text-align:left; } /* default */
.capsach-align-right { text-align:right; }
.capsach-align-center { text-align:center; }