Adding buttons to the svg

HTML & CSS
1

The green background should be under the svg, not over/past it.

Did I set this up wrong?

Was I not supposed to move the class from the svg over to the button?

The buttons work when these are clicked, and no errors.
https://jsfiddle.net/dn5y86vj/

    <button class="playa thePlay">
         <svg width="100%" height="100%" viewBox="0 0 64 64"

After I move all the classes back:

The buttons don’t work, meaning, clicking on them does nothing.
https://jsfiddle.net/zfmr8tnx/

Cannot read properties of null (reading ‘classList’)

      <button >
         <svg class="playa thePlay" idth="100%" height="100%" viewBox="0 0 64 64" pointer-events="none">
            <g id="play">
               <title>Play</title>
               <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
               <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
            </g>
         </svg>
      </button>

Am I supposed to do this?

The buttons work when these are clicked, and no errors.
https://jsfiddle.net/bp20dsto/

      <button class="playa thePlay" >
         <svg class="playa thePlay"

When I do that, the svg’s don’t cover the buttons.

This is how it should look:

2

All you need is to remove the padding.

e.g.

.playa,
.playb,
.playc {
  margin: auto 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  background: green;
  padding:0;
}
1 Like
3

Then:

This becomes button:

button.thePlay {
  pointer-events: none;
}

Then this:

Gets pointer-events="none" also.
<button class="playa thePlay" pointer-events="none">

Now it works.
https://jsfiddle.net/0z7j4L1q/

Which disables clicking when the mouse isn’t over the svg/button.

It should only be clickable when the tooltip is able to be viewed.

Which is when the mouse is over the svg/button.

<button class="playa thePlay" pointer-events="none">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <g id="play">
               <title>Play</title>
               <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted"  />
               <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
            </g>
         </svg>
      </button>
4

What if I removed the buttons altogether and used this instead?

Is this way good also?

https://jsfiddle.net/h87cg2x4/

tabindex="0" role="button" aria-pressed="false"

<svg class="playa thePlay" tabindex="0" role="button" aria-pressed="false" width="100%" height="100%" viewBox="0 0 64 64" pointer-events="none">
         <g id="play">
            <title>Play</title>
            <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
               M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
         </g>
      </svg>

      <svg class="playb thePlay" tabindex="0" role="button" aria-pressed="false" width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>

      <svg class="playc thePlay" tabindex="0" role="button" aria-pressed="false" width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>

aria-pressed

Defines the button as a toggle button. The value of aria-pressed describes the state of the button. The values include aria-pressed="false" when a button is not currently pressed, aria-pressed="true" to indicate a button is currently pressed, and aria-pressed="mixed" if the button is considered to be partially pressed. If the attribute is omitted or set to its default value of aria-pressed="undefined" , the element does not support being pressed.

5

It’s better than nothing but it’s not better than a real button.

Sometimes you just have to do what you think best.

1 Like
6

I’ll keep it as an example of how it can be written a different way in case that is the only way to do it.

I noticed with tabindex="0" it forms an outline around the buttons when one is pressed which can be hidden using outline: 0;

But now I’m seeing there’s also outline: none;

Is there a difference between the two?

outline: 0; vs. outline: none;

Button I’ve noticed, there is no automatic outline formed when that is used.

7

How will I know if I have tabbed to the element if there is nothing to show me that the focus is on that element.

Think about it?

2 Likes
8

Yes there is a difference but the outcome is the same.

Shorthand property values are applied to the property that accepts the value you supply

When you say outline:0 then you are saying outline-width:0; which results in a border of no width hence no outline.

When you say ‘none’ you are saying outline-style: none; which means you don’t see the border either.

Both hide the outline.

1 Like
9

Either do this:
https://jsfiddle.net/0d3816za/

:focus {
   outline: white solid 1px;
}

or this:
https://jsfiddle.net/2o5cs683/

<svg tabindex="0"

Which are both visually different.

10

You don’t have to use outline. You can just change one of the other properties but you should not rely on just color change for focus

You could add a dotted border or change the angle of the shadow or whatever floats your boat :slight_smile:

As long as it’s a visual change that doesn’t rely on a different color only otherwise the color blind don’t see it.

1 Like
11

You don’t have to use outline.

I don’t understand that, what would be used instead of outline?

12

I already answered that.

14

Is this what you mean?
https://jsfiddle.net/1fsvdaeL/

:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

Using border causes the svg to become smaller when each are clicked.
https://jsfiddle.net/g4nj8mtf/

:focus {
  border-style: dotted;
}

15

Yes that’s the sort of thing :slight_smile:

16

Not if you had a transparent border added to it by default and adjusted dimensions to take that all into account. Then you just change the border-style and color on hover.

Box -shadow is easier though as it doesn’t need anything special to set up.

17

Not if you had a transparent border added to it by default

How would that be done?
https://jsfiddle.net/r2avo1kL/1/

:focus {
  border: 3px dotted;
}

button{
  border: 3px solid transparent;
}

svg{
  border: 3px solid transparent;
}

.thePlay{
  border: 3px solid transparent;
}
18

This works also.
https://jsfiddle.net/6k3h4zuo/1/

.thePlay:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.thePlay:focus {
   box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
19

Yes but you don’t really want the outline as well now. or do you?

20

In the code you have to explicitly put:

outline: 0; ?

Like this?

https://jsfiddle.net/aw791eqn/

.thePlay:hover {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.thePlay:focus {
   outline: 0;
   box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

or is this what you mean?
https://jsfiddle.net/zvo3pgnk/

button{
 outline: 0;
}

.thePlay:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.thePlay:focus {
   box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
21

The UA applies outline by default to :focus so if you want to remove it then you have to do so explicitly.