HTML buttons side by side
I have created a audio play page and need to display two buttons side by side in HTML. I am using the inline-block display and the buttons are still not appearing side by side
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style>
button {
display: inline-block;
margin: 5px; /* space between buttons */
background: #b06f97; /* background color */
color: #333; /* text color */
font-size: 1.5em;
font-family: ‘Georgia’, serif;
font-style: italic;
border-radius: 50px; /* rounded corners */
padding: 8px 16px; /* space around text */
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
float:unset;
}
</style>
<button onclick="setPlaySpeed()" type="button">1.5x Speed</button><br> <button onclick="setPlaySpeed3()" type="button">1x Speed</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="audio/audio/nextechfinal2.mp3" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function getPlaySpeed() {
alert(vid.playbackRate);
}
function setPlaySpeed() {
vid.playbackRate = 1.5;
}
function setPlaySpeed3() {
vid.playbackRate = 1;
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER