I need help setting this up

197, 200, 203
that doesn’t make sense.

<a href="" target="_blank" style="display:block;width: 260px;height:44px;display:block;width: 606px;height:50px;border-radius:px;background-image: linear-gradient( to right,#000000 197px,#0059dd 197px, #0059dd 200px, #000000 200px, #000000 400px, #0059dd 400px, #0059dd 403px, #000000 403px );border: 3px solid #0059dd; cursor: pointer;"></a>

was
199 197 198 = 494

I want to change it to:

197 200 197 = 494

You seem to be making it much harder than it is.

You’ve set a width of 612px which minus the outside borders = 606px available.

197 + 3 + 200 + 3 + 203 = 606px

What don’t you understand?

2 Likes

Correct? 199 197 198

a href=“” target=“_blank” style="display:block;width: 260px;height:44px;display:block;width: 606px;height:50px;background-image: linear-gradient( to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; ">

Why do you keep declaring two different widths and heights? Presumably, the first should be removed, as it’s overridden by the second.

1 Like

Thank you for catching that.

Happened when I copied the style portion from another code into the href one.

Fixed:
<a href="" target="_blank" style="display:block;width: 606px;height:50px;background-image: linear-gradient( to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd;"></a>

I think I calculated wrong.

199 197 204 = 600

the black space between each block.

So then, I’d want it to be,

200, 200, 200, space between each block.

Got up to hear so far.
linear-gradient( to right,#000000 200px,#0059dd 200px, #0059dd 203px, #000000 203px,

linear-gradient( to right,#000000 200px,#0059dd 200px, #0059dd 203px, #000000 203px, #000000 403px, #0059dd 403px, #0059dd 406px, last one: " #000000 0px "

And I have a question for you.

How do you calculate the last one? How do you determine how many px it should be?
#000000 0px

I did something wring, it should be 606 width, not 611

I did it here:

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:;background-image: linear-gradient( to right,#000000 198px,#0059dd 198px, #0059dd 201px, #000000 201px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"</button>

linear-gradients don’t adapt to size though?

Can you show me an example of a linear-gradient adapting to a size?

Not if you have a set height and width.

They do if you use percentages

1 Like

for Width & Height. But if I’m using px for width and height, wouldn’t it make sense to use px for the gradient also?

Wouldn’t it be pointless to use percent with px width and height?

asasass, you have created another thread to talk about the appropriateness of px and percent.

I removed it, I never knew I could do that.

@asasass - you’ve been asked before not to edit posts after somebody has replied. The same applies to deleting them, as it makes the topic incoherent.

I only did that cause I wanted to be more thorough, so I deleted it off here and made a topic for it instead.

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