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

From New wiki
Jump to navigation Jump to search
Content deleted Content added
No edit summary
No edit summary
Line 10: Line 10:
border:none;
border:none;
border-radius:9999px; /* pill */
border-radius:9999px; /* pill */
text-decoration:none; /* kill underline on links */
text-decoration:none; /* remove underline on <a> */
box-sizing:border-box;
box-sizing:border-box;
text-align:center;
text-align:center;
Line 17: Line 17:
cursor:pointer;
cursor:pointer;
}
}

.capsach-btn:link,
/* ensure anchors keep the button text color */
.capsach-btn:visited { color:#202122; text-decoration:none; }
a.capsach-btn:link,
a.capsach-btn:visited { color:#202122; text-decoration:none; }


.capsach-btn:hover { background-color:#FFDD00; }
.capsach-btn:hover { background-color:#FFDD00; }
.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }
.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }


/* Mobile-only full-width (opt-in via |mobile=full) */
/* 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; }

Revision as of 04:10, 13 October 2025

.capsach-btn {
  display:inline-block;
  width:278px;                  /* default; override via |width= */
  max-width:100%;
  padding:.2em 1.5em;
  font-weight:600;
  color:#202122;
  background-color:#FEE330;     /* flat color */
  background-image:none;
  border:none;
  border-radius:9999px;         /* pill */
  text-decoration:none;         /* remove underline on <a> */
  box-sizing:border-box;
  text-align:center;
  white-space:nowrap;
  transition:background-color .15s, transform .05s;
  cursor:pointer;
}

/* ensure anchors keep the button text color */
a.capsach-btn:link,
a.capsach-btn:visited { color:#202122; text-decoration:none; }

.capsach-btn:hover  { background-color:#FFDD00; }
.capsach-btn: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; }
}

.capsach-align        { text-align:left; }   /* default */
.capsach-align-right  { text-align:right; }
.capsach-align-center { text-align:center; }
.capsach-align-left   { text-align:left; }