When I copy styles from zeplin and apply it to my button it doesn't work

Question

Above you can see what I should get as result:

  width: 224px;
  height: 36px;
  border-radius: 50px;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(to left, #7c7c7c, #e1e1e1 51%, #7c7c7c);
  border-image-slice: 1;
  background-image: linear-gradient(99deg, rgba(71, 71, 71, 0.4) 2%, #2e2e2e), linear-gradient(to left, #7c7c7c, #e1e1e1 51%, #7c7c7c);
  background-origin: border-box;
  background-clip: content-box, border-box;

here you can see styles for button

  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(to bottom, var(--white) 40%, #a5a5a5 58%, #8e8e8e 64%);
  font-family: Montserrat;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 1px;
  text-align: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

here you can see styles for text

Here is my result:

https://jsfiddle.net/cezLu5fg/

Here you can see my code in fiddle. I don't understand what is wrong:

What do I do wrong ? And how to discover it ? I thought we have Zeplin for this purpose, which give as correct styles which we can apply for our CSS elements, but it works like you can see.

I don't think you copied all of the css. For example, where is the variable `--white` defined? — Rob Moll, Jan 29 '20 at 01:22
Even with this fact, you can see that for button style, there is no variable, but still, it looks wrong ! — Andrey Radkevich, Jan 29 '20 at 01:27
It is not the same. Now the text in the span is affected by the variable. But my point is, if that css was missing, what else is missing? Try going back to zeplin or whatever generator you used and copy again. — Rob Moll, Jan 29 '20 at 01:38

When I copy styles from zeplin and apply it to my button it doesn't work

0 Answers0