Buttons don’t change color

Asked

Viewed 53 times

1

The buttons were to be blue according to the .rounded-button.blue, but they’re black and only the edge works. What’s wrong?

.client-buttons {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
}

.client-buttons button {
  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
  display: block;
  float: left;
  padding: 7px;
  min-width: 34px;
  height: 34px;
  font-size: 12px;
  margin-right: 10px;
  line-height: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button {
  -webkit-appearance: button;
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: buttontext;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  background-color: buttonface;
  box-sizing: border-box;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}

.rounded-button {
  background-color: transparent;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  padding: 11px 24px;
  display: inline-block;
  text-decoration: none;
  font-family: montserrat, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  border: 2px solid #333;
  cursor: pointer;
  height: 47px;
  line-height: 21px;
  text-shadow: none;
  text-align: center;
  -webkit-transition: background-color .2s, color .2s;
  transition: background-color .2s, color .2s;
}

.rounded-button.plain {
  -webkit-transition: opacity .2s;
  transition: opacity .2s
}

.rounded-button {
  opacity: .85
}

.rounded-button:hover {
  opacity: 1
}

.rounded-button.plain,
.rounded-button:not(.plain):hover {
  color: #2d74a6
}

.rounded-button.blue {
  color: #138cc8;
  border-color: #138cc8;
}

.rounded-button.blue:not([disabled]):not(.no-hover):hover,
.rounded-button.blue.plain {
  background-color: #138cc8;
  color: #fff;
}

.rounded-button:not(.white):not([disabled]):not(.no-hover):hover,
.rounded-button:not(.white).plain {
  background-color: #333;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.rounded-button.blue {
  color: #138cc8;
  border-color: #138cc8;
}

.client-buttons button .client-icon {
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
  display: inline-block;
  font-style: normal;
  float: left
}

.client-buttons button .client-icon.client-close-icon {
  background-image: url(../images/favicon-white.png?3);
  background-size: 16px 16px;
  width: 16px;
  height: 16px
}

.client-buttons button .client-icon.client-fullscreen-icon,
#hotel-container .client-buttons button .client-icon.client-fullscreen-icon-back {
  background-image: url(../images/web/fullscreen-icon.png);
  background-position: 0 -14px;
  width: 14px;
  height: 14px;
  margin: 1px
}

.client-buttons button .client-icon.client-fullscreen-icon-back {
  background-position: 0 0
}

.client-buttons button .client-icon.hidden {
  display: none
}

.client-buttons button.client-close .client-close-expand {
  float: left;
  overflow: hidden;
  width: 0;
  text-align: left;
  -webkit-transition: width .15s ease-out 0s;
  transition: width .15s ease-out 0s
}

.client-buttons button.client-close .client-close-expand span {
  padding: 1px 0 0 8px;
  display: inline-block
}

.client-buttons button.client-close:hover .client-close-expand {
  width: 50px
}

.client-buttons button.client-players {
  cursor: default
}

.client-buttons button.client-players .client-icon.client-players-icon {
  background-image: url(../images/web/players-icon.png);
  background-size: 16px 16px;
  width: 16px;
  height: 16px
}

.client-buttons button.client-players .client-players-count {
  float: left;
  text-align: left;
  padding: 0 2px 0 6px;
  font-size: 14px;
  position: relative;
  top: -1px;
  display: inline-block
}

.client-frame {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  border: 0
}
<div class="client-buttons">
  <button class="client-close rounded-button blue plain">
    <i class="client-icon client-close-icon"></i>
    <span class="client-close-expand"><span>Início</span></span>
    </button>
  <button class="client-fullscreen rounded-button blue plain">
    <i class="client-icon client-fullscreen-icon"></i>
    <i class="client-icon client-fullscreen-icon-back hidden"></i>
    </button>
  <button class="client-count rounded-button blue plain">
    <i class="fas fa-user"></i> <b id="count">1,802</b> </button>
  <button class="client-radio rounded-button blue plain">
    <audio controls="controls" id="stream" autoplay="autoplay" preload="none" style="display:none" src="http://yoda.habblet.in:9999/;">
    
    <source id="source_mpeg" type="audio/mpeg" src="http://yoda.habblet.in:9999/;type=mp3">
    <source id="source_ogg" type="audio/ogg" src="http://yoda.habblet.in:9999/;type=ogg">
    <source id="source_aacplus" src="http://yoda.habblet.in:9999/;type=aacplus">
    <source id="source_wav" type="audio/wav" src="http://yoda.habblet.in:9999/;type=wav">
    </audio>
    <i class="fas fa-play" style="display: none;" title="Play/Pause"></i>
    <i class="fas fa-pause" style="" title="Play/Pause"></i>
    <span title="Locutor">
    <span id="streaming_info" style="display: none;">.Canabis</span>
    <i class="fas fa-microphone" style="margin-left: 8px;"></i> <span id="locutor">.Canabis</span>
    </span>
    <i style="margin-right: 4px;" class="fas fa-volume-down" title="Diminuir Volume"></i>
    <i class="fas fa-volume-up" title="Aumentar Volume"></i>
    </button>
</div>
</div>

html css
  • 2

    In the rule .rounded-button:not(.white).plain you set the background color #333. Your buttons have the class .rounded-button, do not have the class .white and owns the class .plain, that is, satisfies the rule, so they should be gray.

  • That’s right, thank you very much!

  • @Andersoncarloswoss responds in the right place ;)

2 answers

4


To understand what is happening to your element you can (and should) use the tools that the browser offers you. Just click on the mouse right click on the element and go to Inspect.

inserir a descrição da imagem aqui

In the tool will be listed all styles that are being applied to the element and mainly in the order that are being applied.

inserir a descrição da imagem aqui

Note that the last style applied was

.rounded-button:not(.white):not([disabled]):not(.no-hover):hover,
.rounded-button:not(.white).plain {
  background-color: #333;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

Where you explicitly made the background gray (#333). Whether the buttons should be blue, or this rule is wrong, or you need to review the order that is applying the styles in the element.

-3

This is because you have some class conflict in the same element, that is, some other class is applying the color to the background later, overwriting the blue color you want, as a quick solution, put a '!Mportant' in the colors of the desired class. Remembering that this is not the right way, the correct way would be to look for the class that is conflicting and check if you really need to make use of both, if you need to use both in the same element, on account of the properties employed in both, it is advisable to divide these properties into more classes, in the latter case, if this is not possible, use the '!Important' as I did, which will force your element to use the marked class property.

.client-buttons {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
}

.client-buttons button {
  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
  display: block;
  float: left;
  padding: 7px;
  min-width: 34px;
  height: 34px;
  font-size: 12px;
  margin-right: 10px;
  line-height: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button {
  -webkit-appearance: button;
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: buttontext;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  background-color: buttonface;
  box-sizing: border-box;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}

.rounded-button {
  background-color: transparent;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  padding: 11px 24px;
  display: inline-block;
  text-decoration: none;
  font-family: montserrat, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  border: 2px solid #333;
  cursor: pointer;
  height: 47px;
  line-height: 21px;
  text-shadow: none;
  text-align: center;
  -webkit-transition: background-color .2s, color .2s;
  transition: background-color .2s, color .2s;
}

.rounded-button.plain {
  -webkit-transition: opacity .2s;
  transition: opacity .2s
}

.rounded-button {
  opacity: .85
}

.rounded-button:hover {
  opacity: 1
}

.rounded-button.plain,
.rounded-button:not(.plain):hover {
  color: #2d74a6
}

.rounded-button.blue {
  color: #138cc8 !important;
  border-color: #138cc8 !important;
}

.rounded-button.blue:not([disabled]):not(.no-hover):hover,
.rounded-button.blue.plain {
  background-color: #138cc8 !important;
  color: #fff !important;
}

.rounded-button:not(.white):not([disabled]):not(.no-hover):hover,
.rounded-button:not(.white).plain {
  background-color: #333;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.rounded-button.blue {
  color: #138cc8 !important;
  border-color: #138cc8 !important;
}

.client-buttons button .client-icon {
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
  display: inline-block;
  font-style: normal;
  float: left
}

.client-buttons button .client-icon.client-close-icon {
  background-image: url(../images/favicon-white.png?3);
  background-size: 16px 16px;
  width: 16px;
  height: 16px
}

.client-buttons button .client-icon.client-fullscreen-icon,
#hotel-container .client-buttons button .client-icon.client-fullscreen-icon-back {
  background-image: url(../images/web/fullscreen-icon.png);
  background-position: 0 -14px;
  width: 14px;
  height: 14px;
  margin: 1px
}

.client-buttons button .client-icon.client-fullscreen-icon-back {
  background-position: 0 0
}

.client-buttons button .client-icon.hidden {
  display: none
}

.client-buttons button.client-close .client-close-expand {
  float: left;
  overflow: hidden;
  width: 0;
  text-align: left;
  -webkit-transition: width .15s ease-out 0s;
  transition: width .15s ease-out 0s
}

.client-buttons button.client-close .client-close-expand span {
  padding: 1px 0 0 8px;
  display: inline-block
}

.client-buttons button.client-close:hover .client-close-expand {
  width: 50px
}

.client-buttons button.client-players {
  cursor: default
}

.client-buttons button.client-players .client-icon.client-players-icon {
  background-image: url(../images/web/players-icon.png);
  background-size: 16px 16px;
  width: 16px;
  height: 16px
}

.client-buttons button.client-players .client-players-count {
  float: left;
  text-align: left;
  padding: 0 2px 0 6px;
  font-size: 14px;
  position: relative;
  top: -1px;
  display: inline-block
}

.client-frame {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  border: 0
}
<div class="client-buttons">
  <button class="client-close rounded-button blue plain">
    <i class="client-icon client-close-icon"></i>
    <span class="client-close-expand"><span>Início</span></span>
    </button>
  <button class="client-fullscreen rounded-button blue plain">
    <i class="client-icon client-fullscreen-icon"></i>
    <i class="client-icon client-fullscreen-icon-back hidden"></i>
    </button>
  <button class="client-count rounded-button blue plain">
    <i class="fas fa-user"></i> <b id="count">1,802</b> </button>
  <button class="client-radio rounded-button blue plain">
    <audio controls="controls" id="stream" autoplay="autoplay" preload="none" style="display:none" src="http://yoda.habblet.in:9999/;">
    
    <source id="source_mpeg" type="audio/mpeg" src="http://yoda.habblet.in:9999/;type=mp3">
    <source id="source_ogg" type="audio/ogg" src="http://yoda.habblet.in:9999/;type=ogg">
    <source id="source_aacplus" src="http://yoda.habblet.in:9999/;type=aacplus">
    <source id="source_wav" type="audio/wav" src="http://yoda.habblet.in:9999/;type=wav">
    </audio>
    <i class="fas fa-play" style="display: none;" title="Play/Pause"></i>
    <i class="fas fa-pause" style="" title="Play/Pause"></i>
    <span title="Locutor">
    <span id="streaming_info" style="display: none;">.Canabis</span>
    <i class="fas fa-microphone" style="margin-left: 8px;"></i> <span id="locutor">.Canabis</span>
    </span>
    <i style="margin-right: 4px;" class="fas fa-volume-down" title="Diminuir Volume"></i>
    <i class="fas fa-volume-up" title="Aumentar Volume"></i>
    </button>
</div>
</div>

  • 4

    I voted -1 because I see no justification for using !important in this case. It is a "quick fix", but in development time I see as more recommended solving the problem than just bypassing it. Honestly, I think the CSS would be much better if the !important did not exist.

  • !Important is to throw dirt under the mat

  • Okay, thanks for the comment. I updated the post.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.