CODEWITHSUNDEEP
javascripthtmlcss
Kim
Kim

Reputation: 558

How to change text color in button

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>

Upvotes: 6

Views: 9908

Answers (7)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

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>

Upvotes: 0

PHP Geek
PHP Geek

Reputation: 4033

try this one 

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

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

Upvotes: 1

symlink
symlink

Reputation: 12209

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>

Upvotes: 1

EGC
EGC

Reputation: 1779

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" />

Upvotes: 2

Moo
Moo

Reputation: 25

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>

Upvotes: 1

Anabi
Anabi

Reputation: 11

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

Upvotes: 0

Matt Davis
Matt Davis

Reputation: 1337

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>

Upvotes: 3

Related Questions