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="">

        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;
    <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.

        var vid = document.getElementById("myVideo");

        function getPlaySpeed() {

        function setPlaySpeed() {
            vid.playbackRate = 1.5;

        function setPlaySpeed3() {
            vid.playbackRate = 1;


Open in new window

Avatar of Daniel Pineault
Daniel Pineault

Link to home
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


oops.  thank you for pointing that out.