Jump to content

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

From Insurer Brain
Content deleted Content added
No edit summary
No edit summary
Line 1: Line 1:
/* Container controls width; child link gets the button skin */
/* The wrapper defines width; the inner link gets the button skin */
.capsach-btn { display:inline-block; width:278px; max-width:100%; box-sizing:border-box; }
.capsach-btn {
display:inline-block;
width:278px; /* default; override via |width= */
max-width:100%;
box-sizing:border-box;
}


/* Make the inner anchor look/behave like a button */
/* Button look on the 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; /* inherit site font & size */
font-weight:600;
color:#202122;
color:#202122;
background-color:#FEE330; /* flat color */
background-color:#FEE330;
text-decoration:none;
text-decoration:none;
border:none;
border:none;
border-radius:9999px; /* pill */
border-radius:9999px;
text-align:center;
text-align:center;
white-space:nowrap;
white-space:nowrap;
Line 23: Line 18:
cursor:pointer;
cursor:pointer;
}
}

/* Link states */
.capsach-btn > a:link,
.capsach-btn > a:visited { color:#202122; text-decoration:none; }


.capsach-btn > a:hover,
.capsach-btn > a:hover,
Line 33: Line 24:
.capsach-btn > a:active,
.capsach-btn > a:active,
.capsach-btn > .capsach-btn__inner:active { background-color:#F0C800; transform:translateY(1px); }
.capsach-btn > .capsach-btn__inner:active { background-color:#F0C800; transform:translateY(1px); }

/* Optional: external link icon suppression if your skin adds one
.capsach-btn > a.external { background-image:none !important; padding-right:1.5em; }
*/


/* Mobile-only full width (opt-in via |mobile=full) */
/* Mobile-only full width (opt-in via |mobile=full) */
Line 43: Line 30:
}
}


/* your alignment helpers */
/* alignment helpers unchanged */
.capsach-align { text-align:left; } /* default */
.capsach-align { text-align:left; }
.capsach-align-right { text-align:right; }
.capsach-align-right { text-align:right; }
.capsach-align-center { text-align:center; }
.capsach-align-center { text-align:center; }

Revision as of 13:01, 13 October 2025

/* The wrapper defines width; the inner link gets the button skin */
.capsach-btn { display:inline-block; width:278px; max-width:100%; box-sizing:border-box; }

/* Button look on the inner anchor/span */
.capsach-btn > a,
.capsach-btn > .capsach-btn__inner {
  display:block;
  padding:.2em 1.5em;
  font: inherit;               /* inherit site font & size */
  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 via |mobile=full) */
@media (max-width:720px){
  .capsach-btn--mobile { display:block; width:100% !important; }
}

/* alignment helpers unchanged */
.capsach-align        { text-align:left; }
.capsach-align-right  { text-align:right; }
.capsach-align-center { text-align:center; }
.capsach-align-left   { text-align:left; }