button not styling

[Jesus Cital]

I am trying to style a button but It appears to be duplicating the button and leaving the origial button there. Any ideas? I have even tried adding a cssStyle attribute and styling there but get same results?

https://jsfiddle.net/schoolisfunkids/q352jovm/6/ 

[Tom Berend]

I was playing with that as well.  The problem is that class 'button' is applied to the <div> that contains the button, not the <button> itself (which gets Chrome defaults).

I also tried using the inherited attributes of TEXT (strokeColor, fillColor, etc), but they get applied to the DIV with no effect on the button.  This would be even more useful.

[Alfred Wassermann]

Thanks a lot for pointing out this problem!

Indeed, the CSS class applies to the div element that contains the HTML button. An immediate fix would be to change the CSS definition from `.button` to `.button > button`:

 

.button > button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 1px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

See it live at https://jsfiddle.net/x1q3neb7/1/

For maximum flexibility I would like to keep the effect of cssClass and highlighCssClass like it is now. However, it may be a good idea to apply the text attributes like strokeColor, ... to the button sub-element. The same will be true for checkbox and input elements.

Best wishes,

Alfred

[Coirle]

Thanks, I appreciate it!