Link to home
Create AccountLog in
Avatar of bidgadget
bidgadgetFlag for United States of America

asked on

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>


Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Daniel Pineault
Daniel Pineault

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of bidgadget

ASKER

oops.  thank you for pointing that out.