How to change the behavior of the following css button?

Question

Hello I am working in the following small page, I have two buttons, one to hide a textarea and the other to show it, in fact they work well however I would like to color the buttom called: Hide in green, in order to do it I tried:

<div class="wrapper">
<button class="button buttom2" style="vertical-align:middle" onclick="hide()"  background-color= "green"; ><span>Hide</span></button>
</div>

but It doesn't affect the behavior of my button, I would like to appreciate any suggestion to fix the problem, I created the following jsfiddle file to show the problem:

https://jsfiddle.net/12bkgd4q/9/

score 1 · Answer 1 · answered Jun 28 '16 at 16:04

background-color is a style property, and the colour green is the property-value of that style property; as they're style properties they should be in the style attribute along with the other style(s):

<button class="button buttom2" style="vertical-align:middle; background-color: green;" onclick="hide()"><span>Hide</span></button>

What you may have been trying to use, but mis-remembering, is the old (now obsolete) bgcolor attribute, which would also set the background-color of an element.

score 1 · Accepted Answer · answered Jun 28 '16 at 16:04

1

You are setting background-color= "green"; outside style attribute, you need to put it inside style attribute

<button class="button buttom2" style="vertical-align:middle;background-color:green" onclick="hide()";><span>Hide</span></button>

JSFIDDLE

answered Jun 28 '16 at 16:04

brk

48,835
10
56
78

Thanks a lot, I really appreciate the support. – neo33 Jun 28 '16 at 16:19

score 1 · Answer 3 · answered Jun 28 '16 at 16:09

1

flip around background color and the JavaScript call, like this:

style="vertical-align:middle; background-color:green;" onclick="hide();"

answered Jun 28 '16 at 16:09

Ulf Gjerdingen

1,414
3
16
20

score 1 · Answer 4 · edited May 23 '17 at 10:27

OBSERVATIONS:

Declaring inline-style css works, but the best approach is to use external css to separate style from content as well as using unobstrusive javascript to bind events.

SOLUTION:

Change misspelling in "buttom2" to "button2".
Remove inline-styles. (Remove style attribute from buttons tag). Add the desired css properties in your external CSS file.
Remove onclick event from your button tag and add identifiers to your buttons so that you can later bind event listeners with jQuery in a separate JS file.

CODE SNIPPET:

var sTextO = $("#texto");

$("#triggerBtn1").on("click", function() {
  sTextO.show();
});

$("#triggerBtn2").on("click", function() {
  sTextO.hide();
});

body {
  background-color: blue;
}
textarea {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#out1 {
  width: calc(100% - 150px);
  text-align: center;
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  white-space: pre;
  background-color: black;
  padding: 25px;
  border: 25px solid navy;
  margin: 25px;
  box-shadow: 0 8px 16px red;
}
.wrapper {
  text-align: center;
}
.button {
  display: inline-block;
  box-shadow: 0 8px 16px white;
  border-radius: 4px;
  background-color: red;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 25px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  vertical-align: middle
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 28px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button2 {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="70" rows="15" id="texto"></textarea>
<div id="out1"></div>
<div class="wrapper">
  <button id="triggerBtn1" class="button button1"><span>Show</span>
  </button>
</div>
<div class="wrapper">
  <button id="triggerBtn2" class="button button2"><span>Hide</span>
  </button>
</div>

MORE INFO:

JS: Why is using onClick() in HTML a bad practice?

CSS: What's so bad about in-line CSS?

score 0 · Answer 5 · answered Jun 28 '16 at 16:04

Add this into css

.button2 {
  background: green;
}

And there is a typo here -

<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color="green" ;><span>Hide</span></button>

Change the classname from "buttom2" to "button2"

score 0 · Answer 6 · answered Jun 28 '16 at 16:09

0

The color should be set in the style attribute of the button tag.

<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()">

https://jsfiddle.net/Lhe768Ld/

answered Jun 28 '16 at 16:09

Devon

1
1
1

score 0 · Answer 7 · answered Jun 28 '16 at 16:22

Issue was with " " , basically style tag ended just after vertical-align, so it does not recognize the background-color. Include them inside " ".

Hope this would solve your issue:

<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()"><span>Hide</span></button>

How to change the behavior of the following css button?

7 Answers7