Member Avatar for konczuras

Hello!

I was wondering if there's any way to refer to a button's text in css. More accurately, to define to classes for a button, one for the button body, and one for the text inside it. Like:

.button{
//the settings of the button
}

.button: p
{
//text layout
}

Is there any method (eg. using spans, etc...)?

Thanks in advance!

  • 4 Contributors
  • 7 Replies
  • 222 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: an <input> (submit/button) shows its label from the value attribute and does not accept inner HTML, so it cannot host a separately styled element for the caption the way a normal element can. As noted, that label is part of the control; as hinted, the solution is to use a control that accepts child elements (for example, a <button>), then put the visible text in a nested element and style the two parts independently. (developer.mozilla.org)

A practical, modern approach when the visual design needs a different background for the text than the button body is to use a real <button> with an inner element and (optionally) CSS text-clipping. Example pattern:

<button class="btn" type="button">
  <span class="btn-label">Send</span>
</button>
.btn { background:#e4e0d8; padding:10px 16px; border:0; }
.btn-label { color:#222; }

/* enhance text with clipped gradient where supported */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .btn-label {
    background: linear-gradient(90deg,#ff7e5f,#feb47b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Use a readable fallback color and test contrast; background-clip: text has browser quirks and requires vendor prefixes in practice. (mdn2.netlify.app)

If an <input> is required (legacy markup, third-party widget), the usual workarounds are: keep the native control for semantics but visually hide it and expose a styled label or element that triggers the native control (via label[for] or JS); or replace the native control with a fully accessible custom control (give it role="button", make it focusable, and handle Enter/Space) — but native <button> is preferred for keyboard and screen-reader behavior. Follow ARIA guidance if a non-button element must act as a button. (developer.mozilla.org)

Notes and cautions: keep real text in the DOM (don’t rely on generated content alone for important labels), preserve focus outlines for keyboard users, and test with screen readers and low-contrast scenarios.

Recommended Answers

All 7 Replies

Member Avatar for claritydigital

Hi there,
You would do what you have done, and create a class, and simply state the attibutes you would like to attribute to the text/font. Because a form submit button is a type of input field you cannot add tags like <span>, or <p> to it, because its text is contained within the value of the input field.

But i get the hunch you are trying to achieve something specific, so if you care to ellborate, please do so:)...

Cheers!

Clarity

Member Avatar for konczuras

Hi,
thanks for your answer.
So, is there any way to access to the text? ( eg. can I set different background-color to the button body and the text?)
Thanks in advance!

Member Avatar for almostbob 
button { color:#ff0000; background-color: #e4e0d8; } 
button:hover { color:#000000; background-color: #66cdaa; } 
button:active { color:#ff00ff; background-color: #66cdaa;  }
button:focus { background-color: #66cdaa; }
/* or */
input[type=button] { color:#ff0000; background-color: #e4e0d8; }
input[type=button]:hover { color:#000000; background-color: #66cdaa; }
input[type=button]:active { color:#ff00ff; background-color: #66cdaa;  }
input[type=button]:focus { background-color: #66cdaa; }</style>

buttons are accessed as are any other elements, it isnt obvious that the button caption is just text
and can be css-ed as a span <button><span style='whatever' or class='whatever'>button text</span></button>

Member Avatar for claritydigital

wowzah... Ive never seen css like this:

input[type=button] { color:#ff0000; background-color: #e4e0d8; }
input[type=button]:hover { color:#000000; background-color: #66cdaa; }
input[type=button]:active { color:#ff00ff; background-color: #66cdaa;  }
input[type=button]:focus { background-color: #66cdaa; }

'

Didnt know you could do that. How amazing. Thanks!!

Member Avatar for almostbob

what can I say, I like turquoise
mouseovers
most elements have four css states
many have more

@media print { 
.dontprint { display:none; } 
p { padding: 1px; font-size: 100%; list-style-type: square; }
}
@media screen ( 
.dontshow { display:none; }
p { padding: 1px; font-size: 100%; line-height:125%; list-style-type: square; }
p:first-line { font-weight:bold; }
p:first-letter { font-size:200%; float:left; } 
}

Drop Caps bold first line paragraphs on screen, plain text on paper
class dontshow/print dont display on screen/paper change layouts to suit media
onscreen forms have a captcha field to verify, printed versions have a signature line

what you can do is limited by what you can imagine

Member Avatar for Jen0608

thanks for the codes bob...

commented: Useless -2
commented: just leave this site. -3
Member Avatar for almostbob 
Somewhat off topic

off track, my 1 css file contains 4 state definitions for a heap of tags, its HUGE for css
trying to get my FIRST page to load fast, subsequent ones load the cached css and js, zoom, discovered apache mod_deflate mod_gzip, marvelous invention

DANGER attempted humor If (apache config) {enable mod_deflate | mod_gzip, for all text files} else { gzip with asp or php } remarkable load time difference,

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.