0

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>

Improve this question
1
  • don't start ID with numbers even if in HTML5 it may works Commented Sep 21, 2018 at 13:28

1 Answer 1

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.