0

The following is the code I'm using. I'd like both buttons to be white in colour, but can't seem to get that to work. I'm customizing a bloom (by divi) popup on wordpress.

<div>
<style>
.btn-group button {
  background-color: #4CAF50;
  border: 1px solid green; 
  color: #FFFFFF; 
  cursor: pointer;
  float: left; }
</style>

<body>
<div class="btn-group" style="width:100%">
  <button style="width:50%"><a href="----">In-Store Visit</a></button>
  <button style="width:50%"><a href="-----">Eye-Exam</a></button>
</div>
</div>
</body>
       </div>
Cameron J
  • 1

2 Answers2

0

That is a link, which is pose in <a>,

a{color: #FFFFFF;}

/* Bloom */

a:hover, a:active{color: #FFFFFF;text-shadow: 0 0 4px #FFFFFF;}
Woobie
  • 95
  • 7
0

The problem here is that you have a <a> element inside the <button>, those have a default color in every browser (that's the blue color that you are getting right now). You need to have a rule to tell the <a> to change color to the one you want:

.btn-group a {
  color: #FFFFFF;
}

Have in mind that you need to add colors for :hover, :active, :visited, etc.

Not related but important: this patter of an <a> inside a <button> it's not quite semantic, and won't work in Firefox (Nesting <a> inside <button> doesn't work in Firefox)

I would change the code to something like this:

<div>
<style>
.btn-group a {
  background-color: #4CAF50;
  border: 1px solid green; 
  color: #FFFFFF; 
  cursor: pointer;
  float: left;
  text-align: center;
  box-sizing: border-box;
}
</style>

<body>
<div class="btn-group" style="width:100%">
  <a style="width:50%" href="----">In-Store Visit</a>
  <a style="width:50%" href="----">Eye-Exam</a>
</div>
</div>
</body>
</div>
Sergio Gabriel Fruto
  • 311
  • 1
  • 5
  • different question, i guess, but how would I separate the two buttons so they don't look the same? I'm thinking if there is a way to add divide the background somehow? – Cameron J Sep 15 '20 at 20:31
  • Honestly I would try to approach this with flexbox. It's a much better technique for aligning elements. Example: https://codepen.io/sergiofruto/pen/MWyqEmN – Sergio Gabriel Fruto Sep 17 '20 at 13:20