Is it possible to remove the button

Hi.

In the following url you can see a transition on javascript and css.

http://xahlee.info/js/js_fadeout_css_transition.html

The button "Face" turns the opacity from 1 to 2, removing the star from sight.

The issue is that I would like also to fade the button itself.

Is it possible?

Thanks very much.

 

No, it changes the opacity from 1 to 0 - the opacity "scale" only goes from 0 to 1. There is no 2.
And yes, of course it's possible to fade the button as well - I'm assuming you want to fade away the button which isn't really usable? Ie, fading away "Fade" when the star is hidden, and fading away "Unfade" when the star is shown? Or are you after something else?
But, yes, it's of course possible, just attach the same event to the container for the button you want to fade.

 

ok, here it is, i updated your script. i added 2 functions showBtn() and hideBtn() and call them in fade() and unfade()

<script>
            var star = document.getElementById("id66259");
            star.style.opacity = 1;
            star.style.transition = "opacity 1s";

            var button1 = document.getElementById("b1");
            var button2 = document.getElementById("b2");

            function fade() {
                star.style.opacity = 0;
                hideBtn("b1");
                showBtn("b2");
            }

            function unfade() {
                star.style.opacity = 1;
                hideBtn("b2");
                showBtn("b1");
            }
          
            function hideBtn(id){
                var button = document.getElementById(id);
                button.style.display='none';
            }
            function showBtn(id){
                var button = document.getElementById(id);
                button.style.display='block';
            }

            button1.addEventListener("click", fade, false);
            button2.addEventListener("click", unfade, false);
        </script>

Code (markup):

and 1 change in HTML: (hide UnFade by default)

<button id="b2" style="display:none">UnFade</button>

Code (markup):