Create a button with CSS, HTML and Center it!

Create a button with CSS, HTML and Center it! Demo

View Demo Full Screen View Demo New Tab

Create a button with CSS, HTML and Center it! Code

HTML

<p>
        Lets center a button with css...
    </p>
    <p>
        1st some fonts...
    </p>
    <p>
      Actually dont bother with bootstrap for this.
    </p>
    <p>
      Add a box with some padding and background.
    </p>
    <p>
      Now add a button. Not yet a button, but we can fix that.
    </p>

    <p>
      Ok it looks like a button now. Add a hover over state to make it appear active when moused over.
    </p>

    <p>
      Looks like i added the button styles to the outer element rather than the button, fix that.
    </p>

    <p>
      Ok now center the button. As its inline block display, it should be centered with text align center.
    </p>

    <p>
        A button in a div that is centered.
    </p>

    <div class='my-box'>
      <div class='my-button'>
        <a href='#!'>My Button!</a>
      </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
      * {
        font-family: 'Montserrat', sans-serif;
      }
      .my-box {
        padding:20px;
        background:teal;
        color:#FFF;
        border-radius:10px;
        min-height:120px;
      }
      .my-button {
        text-align:center;
      }
      .my-button a:hover {
          background:#EEE;
          box-shadow:0px 1px 2px #000;
      }
      .my-button a {
        text-decoration:none;
        color:#444;
        padding:15px 20px;
        background:#FFF;
        border-radius:5px;
        display:inline-block;
      }