Jump to content

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

From Insurer Brain
Content deleted Content added
Created page with ".capsach-btn { display:inline-block; width: 278px; padding:.2em 1.5em; font-weight:700; color:#202122; background-color:#FEE330; border:1px solid; border-color: #a2a9b1 #72777d #72777d #a2a9b1; box-sizing:border-box; text-align:center; white-space:nowrap; transition:background-color .15s, border-color .15s, transform .05s; } .capsach-btn:hover { background-color:#FFDD00; border-color:#a2a9b1 #72777d #72777d #a2a9b1; } .capsach-btn:active { back..."
 
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* The wrapper controls width; child link gets button styling */
.capsach-btn {
.capsach-btn {
display:inline-block;
display:inline-block;
width: 278px;
width:278px;
max-width:100%;
box-sizing:border-box;
margin:0.5em 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;
padding:.2em 1.5em;
font: inherit; /* use CapSach site font */
font-weight:700;
color:#202122;
color:#202122;
background-color:#FEE330;
background-color:#FEE330;
text-decoration:none;
border:1px solid;
border-color: #a2a9b1 #72777d #72777d #a2a9b1;
border:none;
border-radius:9999px;
box-sizing:border-box;
text-align:center;
text-align:center;
white-space:nowrap;
white-space:nowrap;
transition:background-color .15s, border-color .15s, transform .05s;
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; }
}
}

.capsach-btn:hover { background-color:#FFDD00; border-color:#a2a9b1 #72777d #72777d #a2a9b1; }
/* alignment helpers */
.capsach-btn:active { background-color:#F0C800; border-color:#a2a9b1 #72777d #72777d #a2a9b1; transform:translateY(1px); }
.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; }
.capsach-align-left { text-align: left; }
.capsach-align-left { text-align:left; }

Latest revision as of 00:10, 17 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:0.5em 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 */
  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; }