Centered buttons example

by danielkwood

HTML

<html>
  <head>
    <title>Test</title>
  </head>
  
  <body>
    <div class="one">
      <div class="button-container">
        <button class="mybutton">Click me</button>
      </div>
    </div>
    
    <div class="two">
      <div class="button-container">
        <button class="mybutton">Click me</button>
      </div>
    </div>
    
    <div class="three">
      <div class="button-container">
        <button class="mybutton">Click me</button>
      </div>
    </div>
  </body>
</html>

CSS

body{
  margin: 0;
}

.one{
  width: 100%;
  height: 500px;
  background-color: yellow;
}

.two{
  width: 100%;
  height: 500px;
  background-color: lightgreen;
}

.three{
  width: 100%;
  height: 500px;
  background-color: lightblue;
}

.button-container{
  width: 30%;
  margin: 0 auto;
  padding-top: 40%;
}

.mybutton{
  width: 100%;
  background-color: purple;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 20px;
}