My goal is to create a button that, when clicked, causes the gray stripe in the middle to transition to the right. I am not very familiar with HTML, CSS, and JavaScript so I could use some help figuring out how to achieve this effect. Here is a quick illustration of what I have in mind.
Thank you for your assistance.
body
{
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
color:white;
overflow:hidden;
font-weight: bold;
background-image: url('https://i.imgur.com/PSr4n0g.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.Shape{
clip-path: polygon(25% 0%, 0 0, 75% 100%, 100% 100%);
position: fixed;
height: 100%;width: 100%;
}
.ShapeStyle{
background-color: #20232d;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: opacity(55%);
z-index: -1;
} <link rel="stylesheet" type="text/css" href="1.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
</head>
<body>
<div class="Shape">
<div style="height: 80%;width: 60%;margin-left: 10%;margin-top: 10%;">
<img src="logo.png" height="20%">
<div class="ShapeStyle"></div>
</div>
</div>
<div onmouseup="gray()">
<button class="clicky">CLICK ME!</button>
</div>
<div class="background">
</div>
</body>
<script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-73378277-10'); </script>
<audio id="leson" src="music/music.ogg" autoplay="true" hidden="true" loop="true"/>
<script>
var play = false;
var myAudio = document.getElementById("leson");
myAudio.volume = 0.1;
function onKeyDown(event) {
switch (event.keyCode) {
case 32: //SpaceBar
if (play) {
myAudio.pause();
play = false;
} else {
myAudio.play();
play = true;
}
break;
}
return false;
}
window.addEventListener("keydown", onKeyDown, false);
</script>
</body>
</html>