Jump to content

Button


Nill

Recommended Posts

Hello, I need help. I am beginner.<!DOCTYPE html>
<html lang="lt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">

 button{
                    position: relative;
                    top: 26px;
                    width:30px;
                    background-color:#ffffff;
                    border:none;
                    }
                    button i i{
                        display: inline-block;
                        width: 2px;
                        height: 20px;
                        background:#00B875;
                        animation: mymove 1.2s infinite;
                        }
                        .play1 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
                        .play2 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
                        .play3 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
                        .play4 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
                        .play5 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
                        @keyframes mymove {
                        from {height: 6px;}
                        to {height: 12px;}
                        }
                  
                        .pause1 {animation-timing-function: step-end;}
                        .pause2 {animation-timing-function: step-end;}
                        .pause3 {animation-timing-function: step-end;}
                        .pause4 {animation-timing-function: step-end;}
                        .pause5 {animation-timing-function: step-end;}  

    </style>        
</head>
<body>

                <button onclick="myFunction()">                 
                    <i id = 1 class="play">
                        <i class="play1"></i>
                        <i class="play2"></i>
                        <i class="play3"></i>
                        <i class="play4"></i>
                        <i class="play5"></i> 
                    </i>
                    <i id = 2 class="pause">
                       <i class="pause1"></i>
                        <i class="pause2"></i>
                        <i class="pause3"></i>
                        <i class="pause4"></i>
                        <i class="pause5"></i> 
                    </i>
                     </div>
                </button>     

<script>
var myVideo = document.getElementById("9");
var isPlaying = false;
function myFunction(){
  if (isPlaying) {
    myVideo.pause();
     document.getElementById("1").style.opacity = "0";            
  } else {
    myVideo.play();      
     document.getElementById("2").style.opacity = "0";
  }
};
myVideo.onplaying = function() {
  isPlaying = true;
};
myVideo.onpause = function() {
  isPlaying = false;

};     
</script>

    </body>    
</html>

There are two buttons here, it's not good. Thank you.

Link to comment
Share on other sites

What are you trying to do with all of those i elements inside a button element?  If you look at your developer tools you'll notice an error message because you're trying to get an element with an ID that doesn't exist.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...