Linear gradient is not working with element

Question

I am trying to apply CSS gradients to my <a> elements. It clearly doesn't work and I've been trying to work it out with no success. I am using Chrome if it has to do anything with the issue.

body {
  margin: 1cm;
}

a {
  padding: 15px 60px 15px 60px;
  text-decoration: none;
  border: 1px solid black;
}

#1button {
  background: rgb(2, 0, 36);
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(12, 12, 125, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

#2button {
  background: rgb(2, 0, 36);
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(232, 51, 55, 1) 35%, rgba(241, 95, 223, 1) 100%);
}

<a id="1button">Button #1</a>
<a id="2button">Button #2</a>

don't start ID with numbers even if in HTML5 it may works – Temani Afif Sep 21 '18 at 13:28 — Temani Afif, Sep 21 '18 at 13:28

Ori Drori · Accepted Answer · 2018-09-21T13:32:27.790

2

Don't use a number as the 1st character of your ids:

body {
  margin: 1cm;
}

a {
  padding: 15px 60px 15px 60px;
  text-decoration: none;
  border: 1px solid black;
}

#button1 {
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(12, 12, 125, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

#button2 {
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(232, 51, 55, 1) 35%, rgba(241, 95, 223, 1) 100%);
}

<a id="button1">Button #1</a>
<a id="button2">Button #2</a>

edited Sep 21 '18 at 13:32

answered Sep 21 '18 at 13:27

Ori Drori

183,571
29
224
209

1

I would add that the first background property is useless because it's getting overriden ... probably it's better to add `background-color` after the background definition (or remove it since the gradient is made with solid color) – Temani Afif Sep 21 '18 at 13:31

Linear gradient is not working with element

1 Answers1