How would I adjust the padding so it's covering the whole thing?

HTML & CSS
1 

<div style="width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;">

<button id="playButton" style="border:none;cursor: pointer;background-color:red;color:blue;padding:14px 260px 8px 0;margin:0; " onmouseover="  
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.play();
  } else {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.pause();
  }">
 </button>

</div>
2

What are you trying to achieve here?

From what I can see, padding is not the right property to be using, but as I’m unclear what end result you’re aiming for, it’s hard to tell.

I gave you a fairly comprehensive guide to padding yesterday: When styling a clickable button, should I be using padding, width and height, or both? - #15 by TechnoBear If there is something in there that is unclear, then please ask.

2 Likes
3

I got it: The padding or, height/width of the background of the button controls mouseover and onclick. That’s what turns it on.

<div style="margin:0px 0px -28px 0px;width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;"></div>

<button id="playButton" style="border:none;cursor: pointer;background-color:black;color:blue;padding:12px 260px 12px 0;margin:0px 0px 0px 0px; " onmouseover="  
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.play();
  } else {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.pause();
  }">
 </button>
4

I still don’t understand what you’re trying to achieve here, and you still seem to be using padding incorrectly to set dimensions. What you’ve done may appear to work, but if you zoom text, your black box moves down.

2 Likes
5

I spoke too fast. still broken . :frowning:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.