PaulOB
November 16, 2021, 9:55pm
23
I added the extra b element because its a useful little non semantic tag but purists would say it should have been a span. I added it so that I could place the border on top of the X. It could be done without the extra b element if you put the border on the button instead but the problem is that the X will show a slight gap or overlap the circle slightly. It was much easier to make the X bigger than needed and then hide the edges under the b element.
I changed the 4th item in my codepen to not use the b element for comparison.
The X is just two pseudo elements that have a width and height and are rotated and placed into position.
.exitnew:before,
.exitnew:after {etc..}
Exactly how it is used normally!
When you hover the button you can change the button and any elements inside as required.
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
Nothing special there that’s just normal css.
The background seems to be blue in that demo. You said you wanted the X to turn green and the background to be transparent which is what my demo does.
1 Like
PaulOB
November 16, 2021, 10:24pm
24
Like this.
The second one is the css version. the first one is your original svg
<button class="playa thePlay2" type="button" aria-label="Open"></button>
I just did it by eye so may need tweaking to be exact.
1 Like
asasass
November 16, 2021, 11:59pm
25
Much better than my attempt. https://jsfiddle.net/m5o03pt7/
.play:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 80px;
height: 80px;
border: 5px solid #0059dd;
background: #000000;
border-radius: 100%;
}
.play:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -15px;
width: 0;
height: 0;
border-left: 40px solid #0059dd;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
asasass
November 17, 2021, 12:15am
26
Is there a way adjust that so that changing the width and height doesn’t mess up the position of the X?
Is there a way to keep the lines in position?
https://jsfiddle.net/a0mfur9c/2/
asasass
November 17, 2021, 11:50am
27
Using a gradient, Would I be able to add a hover to the X here?
https://jsfiddle.net/b6vpdxzh/
The only thing working there is the fade.
.exitnew {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background:
linear-gradient(green 0 0),
linear-gradient(green 0 0) blue;
background-size: 7px 100%, 100% 7px;
background-position: center;
background-repeat: no-repeat;
border: 5px solid red;
border-radius: 50%;
transform: rotate(45deg);
}
PaulOB
November 17, 2021, 1:37pm
28
Yes exactly as you would expect.
.exit:hover {
background-image:
linear-gradient(red 0 0),
linear-gradient(red 0 0);
}
1 Like
PaulOB
November 17, 2021, 1:39pm
29
Just use percentages rather than a fixed position.
.exit2::before,
.exit2::after {
top: 47%;
}
1 Like
asasass
November 17, 2021, 2:33pm
30
How did you get the number 47% ?
What was the math?
Is it supposed to be a one size fits all widths/heights?
Top has more white than bottom here.
https://jsfiddle.net/23vbuy5h/
asasass
November 17, 2021, 3:35pm
31
How is a transition added to the gradient? https://jsfiddle.net/shncy4zq/
.fadingOut .exit {
background-image:
linear-gradient(red 0 0),
linear-gradient(red 0 0);
}
PaulOB
November 17, 2021, 8:08pm
32
You can’t. That’s why I used the pseudo classes and drew lines
The only way to transition a gradient would be to use a pseudo class to create another gradient over the top and then change the opacity of the one on top t see the one below.
Like this:
.exit{
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background:
linear-gradient(green 0 0),
linear-gradient(green 0 0) blue;
background-size: 7px 100%, 100% 7px;
background-position: center;
background-repeat: no-repeat;
border: 5px solid red;
border-radius: 50%;
transform: rotate(45deg);
animation: fadeInExit 2s forwards 0s;
opacity: 0;
pointer-events: none;
}
@keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit:before {
content: "";
position: absolute;
left: -5px;
top: -5px;
right: -5px;
bottom: -5px;
background-image:
linear-gradient(red 0 0),
linear-gradient(red 0 0);
transform: rotate(0deg);
box-sizing: border-box;
width: 48px;
height: 48px;
cursor: pointer;
background-size: 7px 100%, 100% 7px;
background-position: center;
background-repeat: no-repeat;
border: 5px solid red;
border-radius: 50%;
transition: 1s ease;
}
.exit:hover:before,
.fadingOut .exit:before {
opacity: 0;
}
.fadingOut .exit {
animation: fadeOutExit 5s forwards;
pointer-events: none;
opacity: 1;
}
@keyframes fadeOutExit {
to {
opacity: 0;
}
}
1 Like
asasass
December 1, 2021, 4:56am
33
This way works well I find. https://jsfiddle.net/2uzo94q6/
And now width: 100%;
can be removed.
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
margin: auto;
width: 48px;
height: 48px;
cursor: pointer;
border-radius: 50%;
border: 5px solid red;
background: transparent;
transition: all 1s ease;
}
.exitnew::before,
.exitnew::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew::after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover::before,
.exitnew:hover::after {
background: green;
}
<button class="exitnew" type="button" aria-label="Close"></button>
asasass
December 2, 2021, 1:50am
34
Switching svg exit over to pure css.
For the X button to fade out on the hover color, how would this be fixed?
I left the svg stuff in the css to show how it was working before.
My guess was this, but that makes no sense.
.exit:hover::before.
.exit:hover::after
.fadingOut .exit:hover::before,
.exit:hover::after {
background: green;
}
To test code, click the x button, then move the mouse off it.
It should not change back to red which was the original color.
https://jsfiddle.net/bfz7gxnd/
.exit {
position: absolute;
top: auto;
/*bottom: -47px;*/
/*margin: auto;*/
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
background: black;
border-radius: 50%;
border: 5px solid red;
animation: fadeInExit 1s forwards;
opacity: 0;
pointer-events: none;
}
.exit::before,
.exit::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
transition: all 1s ease;
}
.exit::after {
transform: rotate(-45deg);
}
.exit:hover::before,
.exit:hover::after {
background: green;
}
@keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit svg {
fill: red;
transition: fill 3s ease;
}
.exit:hover svg,
.fadingOut .exit svg {
fill: green;
}
.fadingOut .exit {
animation: fadeOutExit 8s forwards;
pointer-events: none;
opacity: 1;
}
@keyframes fadeOutExit {
to {
opacity: 0;
}
}
asasass
December 2, 2021, 8:35am
35
Doing this I was able to get it to fade out on green.
But then only 1 line is hoverable, meaning only 1 line changes from red to green on hover.
.exit:hover::before,
.exit:hover::after,
.fadingOut .exit::before,
.exit::after {
background: green;
}
PaulOB
December 2, 2021, 9:37am
36
Do you want it to fade out on click?
If so:
.fadingOut .exit::before,
.fadingOut .exit::after {
background: green;
}
Having a hover effect would be nonsense because it will change to green and then when you click it will just stay green. If that’s what you want then leave the hover effect in place as well.
.exit:hover::before,
.exit:hover::after,
.fadingOut .exit::before,
.fadingOut .exit::after {
background: green;
}
1 Like
asasass
December 6, 2021, 3:19am
37
After changing over the svg to css play buttons, none of the buttons are clickable.
Nothing happens when they are clicked on.
css play buttons https://jsfiddle.net/8vah293b/
svg play buttons https://jsfiddle.net/gnabvyem/
Did I forget to do something or did I mess up somewhere?
Never mind.
I figured it out. https://jsfiddle.net/bzjm3qe2/
I forgot to delete this:
button.thePlay {
pointer-events: none;
}
1 Like
asasass
December 9, 2021, 1:43pm
38
I am having an issue.
CSS play not turning green after click.
This one is broken.
https://jsfiddle.net/rwqfdj13/
This
.played {
fill: green;
}
Would be changed to what?
.cover {
-webkit-appearance: none;
appearance: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.cover::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
.played {
fill: green;
}
This works for the circle:
.played {
border: 9px solid green;
}
What about for the triangle in the middle?
It would be written like this? https://jsfiddle.net/s9j2L1rw/
.played {
border: 9px solid green;
}
.played::before{
border-left: 27px solid green;
}
PaulOB
December 9, 2021, 3:02pm
39
This would do.
.played{border-color:green;}
.played:before{border-left-color:green;}
1 Like
system
Closed
March 10, 2022, 10:03pm
40
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.