OnClick transition effects, and understanding the markup code

HTML & CSS
1

What are all the different types of transition effects I could implement on this code which uses an OnClick method?

This is one way:

.playButtonb {
   transition: background 5.0s;

This is another way:

 .playButtonb.active{ animation:fade 5s ease; }

 @keyframes fade{
  0% {opacity:0.2;}
  100%{opacity:1;}
 }

Are there any other different ways I can do other things that involve transition?

2

Is there a visual difference between these?

transition: background 5s;
transition:all 5s ease;
transition:5s;
transition:5s ease-in-out;

Does adding ease add anything extra visually to the code? What purpose does it serve?
Does adding ease-in-out add anything extra visually to the code?
What’s the purpose of adding all?

Is there a difference between:

transition: background 5s;
and:
transition:5s;

I’m reading this right now:

And this is informative too:
https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

3

Can you add a transition effect to the linear-gradient?

I’m currently trying to find this out.

Right now there is currently a transition on the border, but that doesn’t include the linear-gradient also.

You can see in the code that the 2 linear-gradient lines down the middle, they change right away, there’s no transition applied to them at all.

How would you apply a transition effect to the linear gradient also?

Is this possible to do?

transition: all

Wouldn’t that apply to the linear-gradient also?

4

background-images are not in the the list of animatable properties

As was explained in one of your other threads, you are essentially using multiple background images when you combine your gradients with your bg image.

There might be some workaround using opacity but I’m not sure how it would work in your case.

You can however use this other workaround with pseudo ::before and ::after elements to take the place of those linear gradients.

You can run the full code from this…
audio-transition.zip (2.2 KB)

.playButtonb {
  transition:5s;
  position: relative;
  width: 260px;
  height: 260px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
}

.playButtonb.active {
  border: 3px solid #e77d19;
  background-position: 0 -260px;
}
    .playButtonb::before,
    .playButtonb::after {
        transition:5s;
        content:"";
        position:absolute;
        top:0;
        left:83px;
        width:3px;
        height:100%;
        background:#0059dd;
    }
    .playButtonb::after { left:174px;}

    .playButtonb.active::before,
    .playButtonb.active::after {
        background:#e77d19;
    }
1 Like
5

In the downloaded code you provided it included
z-index:1;

I removed it and there was no difference,

Is it needed at all?

6

Yeah, you grabbed the .zip before I replaced it with an edit.
No, it’s not needed in this case.

I reworked the code from this other post and the z-index was needed on it.

7

How would this work

.playButtond::before,
.playButtond::after {

on this code?

I removed the linear-gradient from it.

.gradd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
}
8

I got it, that one requires
z-index:1;

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}
9

Would these go inside a before and after thing also?

And how would you do that?

.img1::before,
.img2::after {

.img1 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}
10

Like this?

How come this:

.img2::after{
}

Doesn’t need:
content: "";

.img1::before,
.img2::after  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}
11

Nope, that won’t work.

To replace the .img1 & .img2 divs with pseudo elements they would become

.playButtond::before

.playButtond::after

Then they would be children of .playButtond just like .img1 & .img2 divs are now

Only group the property names when they are sharing the same styles

12

I did it wrong?

This is set up wrong?

.img1::before,
.img2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}
13

Are you saying not to use before & after on these?

.img1 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}
14

Try this,

.playButtond::before  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

But you will need to remove the img1 and img2 from the html and css so the pseudos don’t duplicate the same thing twice

EDIT: had to put content:“”; in :after

15 
.playButtond {
  position: relative;
  border: 3px solid #0059dd;
  width: 260px;
  height: 194px;
  cursor: pointer;
}

.playButtond::before  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}

.buttond div {
  position: absolute;
  top: 76px;
  left: 111px;
  width: 38px;
  height: 38px;
  background-color: transparent;
  background-size: 14px 18px;
  background-repeat: no-repeat;
  border-radius: 50%;
}
16

I think you meant this:, or no?

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}
17

How would I add this to that code?
These are the 2 lines.

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}
18

You can group the shared styles together then override below with the changes

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png") no-repeat center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  background: url("https://i.imgur.com/4HJbzEq.png") no-repeat center;
  width: 180px;
  height: 180px;
}

I’m not even sure where your at right now with all those fiddles and code that’s being posted :neutral_face:

19

Version 1:

Version 2: Combined

#17

How do I add the 2 lines in?
https://i.imgur.com/yj3Y7Fu.png

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}
20

You only get one ::before and one ::after pseudo element per html element

Read up on it first so you will know what your working with

To get the two lines in you would need another element to hook new pseudos to

1 Like