<center>
  <div class="title">
    <h1>Collection of Pure CSS Buttons</h1>
    <h4 style="float:right;"><i> Kanak Sharma</i></h4>
  </div>
  <div class="btndiv">
    <h2>Button 1: Highlight Button</h2>
    <hr color="white" noshade>
    <div class="btn-container">
      <button class="btn1 btn">Click Here</Button>
    </div>
    <h2>Button 2: Analog Button</h2>
    <hr color="white" noshade>
    <div class="btn-container">
      <button class="btn2 btn" id="btn2">Click Here</Button>
    </div>
    <h2>Button 3: Transfiguration Button</h2>
    <hr color="white" noshade>
    <div class="btn-container">
      <button class="btn3 btn">Click Here</Button>
    </div>
    <h2>Button 4: Material Floating Button</h2>
    <hr color="white" noshade>
    <div class="btn-container">
      <button class="btn4 btn">Click Here</Button>
    </div>
    <h2>Button 5: Secret Button</h2>
    <hr color="white" noshade>
    <div class="btn-container">
      <button type="submit" class="btn5 btn" id="narnia"><a href="https://www.narnia.com" target="_blank">Secret Door To Narnia!</a></Button>
    </div>
  </div>
</center>
<div class="blank" style="width=100%;  height:50%;"></div>

body {
  background: #009688;
  color: white;
}

.title {
  width: 40%;
  height: 150px;
}

h1,
h2,
h3,
h4 {
  font-family: Sans-Serif;
}

h1 {
  text-shadow: 0px 5px rgba(77, 77, 77, 0.5);
  margin-top: 40px;
}

h4 {
  text-shadow: 0px 3px rgba(77, 77, 77, 0.5);
}

.btndiv {
  margin: 40px;
  font-weight: bold;
  width: 500px;
  height: 100px;
}

.btn-container {
  width: 400px;
  height: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.btn {
  padding: 10px;
  font-weight: bold;
  font-size: 18px;
  width: 400px;
  height: 80px;
  font-family: Sans-Serif;
}

.btn1 {
  background-color: white;
  border: 3px solid #4CAF50;
  color: #4CAF50;
  text-transform: uppercase;
  height: inherit;
  width: inherit;
  transition: background-color 0.5s ease, color 1s ease;
  cursor: pointer;
  box-shadow: 10px 10px rgba(77, 77, 77, 0.5);
}

.btn1:hover {
  background-color: #4CAF50;
  color: white;
}
.btn1:active{
  border: 10px dotted;
}

.btn2 {
  background-color: #4CAF50;
  border: 3px solid #4CAF50;
  color: white;
  text-transform: uppercase;
  height: auto;
  width: inherit;
  text-shadow: 0px 2px rgba(77, 77, 77, 0.5);
  box-shadow: 0px 6px rgba(77, 77, 77, 1);
  cursor: pointer;
}
.btn2:hover {
  transform: scale(1.05);
}

.btn2:active {
  text-shadow: 0px 2px rgba(77, 77, 77, 0.5);
  box-shadow: 0px 0px rgba(77, 77, 77, 1);
  transform: translateY(6px);
}

.btn3 {
  height: auto;
  width: inherit;
  background-color: white;
  color: #4CAF50;
  border: 4px solid #4CAF50;
  transition: border 0.7s ease-out, text-transform 1s, border-radius 1s ease-out;
  cursor: pointer;
  border-radius: 0px;
  box-shadow: 10px 10px rgba(77, 77, 77, 0.5);
}

.btn3:hover {
  border: 8px solid #4CAF50;
  text-transform: uppercase;
  border-radius: 30px;
  text-decoration: underline;
}

.btn3:active {
  background-color: #4CAF50;
  color: white;
  transform: translate3d(3px, 3px, 0px);
  box-shadow: 7px 7px rgba(77, 77, 77, 0.5);
}

.btn4 {
  background-color: #4CAF50;
  border: 3px solid #4CAF50;
  color: white;
  text-transform: uppercase;
  height: auto;
  width: inherit;
  text-shadow: 4px 4px 3px rgba(77, 77, 77, 0.5);
  box-shadow: 14px 14px rgba(77, 77, 77, 0.1);
  cursor: pointer;
  transition: transform 0.4s, box-shadow 0.4s;
}

.btn4:hover {
  box-shadow: 14px 14px rgba(77, 77, 77, 0.5);
}

.btn4:active {
  transform: translate3d(7px, 7px, 0px);
  box-shadow: 7px 7px rgba(77, 77, 77, 0.5);
}

.btn5 {
  height: auto;
  width: 70%;
  background-color: #009688;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  height: 100px;
  overflow:hidden;
  transition: background-color 1s ease-out, width 2s ease, text-shadow 2s 2s ease-out, color 1s ease-out;
  -webkit-transition: background-color 1s ease-out, width 2s ease, text-shadow 2s 2s ease-out, color 2s ease-in;
}

.btn5:hover {
  color: #009688;
  -webkit-text-shadow: 0px 0px 10px 10px #4CAF50;
  text-shadow: 0px 0px 10px 10px #4CAF50;
  background-color: white;
  width: 100%;
}

.btn5:active {
  transform: translateY(6px);
}
.btn5 a{
  color: #009688;
  text-decoration:none;
}