Problem accessing item through data attribute

Viewed 22

With css, I need to customize the button: background-color, font-size, etc.
The HTML is:

<a href="#" data-context="desk">
    <button type="button">Button</button>
</a>

Could you help me please.

1 Answers

You can use the [data-context="desk"] button to write css, here is the example:

[data-context="desk"] button {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
  -webkit-appearance: button;
  cursor: pointer;
}
<a href="#" data-context="desk">
  <button type="button">Button</button>
</a>

Related