How to change text color in button

Question

I want to change the button text for 'New Service Request' to white. Please advise.

.btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

.btn-info:hover{

background: #003366;

transition: 0.5s background;}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

Does this answer your question? How to set text color in submit button? — Chandrashekhar Komati
– Chandrashekhar Komati, Commented Dec 6, 2019 at 3:26
@chandu.komati I don't think that's related as their issue that it is a button with an a nested within it. Targetting the button with CSS won't modify the font-color as per the linked example. The only answer is to target the a within the button using CSS. — EGC
– EGC, Commented Dec 6, 2019 at 3:27

Matt Davis · Accepted Answer · 2019-12-06 02:56:46Z

3

You need to set the color of the a tag within the button to white.

Example:

.btn-info {
  background: #0066cc;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  padding: 10px 20px;
}

.btn-info:hover {
  background: #003366;
  transition: 0.5s background;
}

.btn-info a {
  color: white;
}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

answered Dec 6, 2019 at 2:56

Matt Davis

1,33711 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EGC · Accepted Answer · 2019-12-06 03:34:52Z

You simply need to target .button-info a to change the color of your text to white.

<style>

.btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

.btn-info a, .btn-info:hover {
  color: white;
}

.btn-info:hover{

background: #003366;

transition: 0.5s background;}

</style>

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

It's worth noting too that your HTML is invalid, the nested structure <button><a></a></button> is not accepted, and can be checked by a Markup Validation Service. See the error below:

Error: The element a must not appear as a descendant of the button element.

A valid and more succinct version of your code is as follows:

<style>
  .btn-info {
    background: #0066cc;
    border: none;
    border-radius: 3px;
    font-size: 18px;
    padding: 10px 20px;
    color: white;
  }
  
  .btn-info:hover {
    background: #003366;
    transition: 0.5s background;
    cursor: pointer;
  }

</style>

<input type="button" class="btn-info" onclick="location.href='http://google.com';" value="Google" />

Moo · Accepted Answer · 2019-12-06 03:24:05Z

1

Change your class button-info to white You can do something like this. Hope it helps

.btn-info { 
background: #0066cc; 
border: none; 
border-radius: 5px; 
font-size: 14px; 
padding: 10px 10px; }

.btn-info a {
  color: #fff;
  text-decoration: none;
}

.btn-info:hover{
background-color: #003366;
}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

answered Dec 6, 2019 at 3:24

Moo

258 bronze badges

Comments

symlink · Accepted Answer · 2019-12-06 03:38:20Z

1

Remove the a tag altogether, and give the hover state of the button a rule of cursor: pointer:

.btn-info {
  background: #0066cc;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  padding: 10px 20px;
  color: #fff;
}

.btn-info:hover {
  background: #003366;
  transition: 0.5s background;
  cursor: pointer;
}

<button class="btn-info">New Service Request</button>

answered Dec 6, 2019 at 3:38

symlink

12.2k7 gold badges31 silver badges57 bronze badges

Comments

PHP Geek · Accepted Answer · 2019-12-06 05:11:37Z

1

try this one

.btn-info
{
    font-size: 13px;
    color:green;
}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

answered Dec 6, 2019 at 5:11

PHP Geek

4,0632 gold badges19 silver badges32 bronze badges

Comments

Anabi · Accepted Answer · 2019-12-06 03:05:08Z

0

You should target the inside .button-info class to change the color of your text.

answered Dec 6, 2019 at 3:05

Anabi

112 bronze badges

Comments

Pushprajsinh Chudasama · Accepted Answer · 2019-12-06 13:23:11Z

0

try this code: 

    .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

    .btn-info:hover{
    color: #fff;
    background: #003366; 

    transition: 0.5s background;}



    <button class="btn-info" href="LINK">New Service Request</button>

answered Dec 6, 2019 at 13:23

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to change text color in button

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related