my STYLED BUTTONS

by firegroove

HTML

<button class="coolStyle_1">THIS IS COOL !</button>
<button class="coolStyle_2 btn_big">THIS IS FLAT !</button>
<button class="coolStyle_3">THIS IS FANCY</button>
<br>
<br>
<br>

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>

<!-- <div class="info">Resize this panel to see grids respond</div> -->

<br>


<div id="number1" class="">
  <h1 class="text_Center">These are Buttons</h1>
  <button>BUTTON # 1</button>
  <button>BUTTON # 2</button>
  <button>BUTTON # 3</button>
  <button>BUTTON # 4</button>
  <button>BUTTON # 5</button>
  <button>BUTTON # 6</button>
</div>

<br><br>

<div id="number2" class="">
  <h1 class="text_Left">These are Buttons</h1>
  <button>BUTTON # 1</button>
  <button>BUTTON # 2</button>
  <button>BUTTON # 3</button>
  <button>BUTTON # 4</button>
  <button>BUTTON # 5</button>
  <button>BUTTON # 6</button>
</div>

<br><br>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

h1 {
  color: yellow;
  font-size: 22px;
  padding-top: 20px;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
}

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}

.text_Center {
  text-align: center;
  clear: both;
}

.text_Left {
  text-align: Left;
  clear: both;
}

.myLine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
}

button {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
}

.coolStyle_1 {
  background: none repeat scroll 0 0 #6fb81a;
  border: 1px solid #4b7c13;
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 0 1px #7cce1d inset, 0 -25px 0 #5da514 inset;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 16px 45px;
  text-shadow: 1px 1px 0 #517c1d;
  display: inline-block;
  zoom: 1;
  margin-top: 14px;
  margin-bottom: 4px;
  text-decoration: none;
  transition: all 200ms ease 0s;
}

.coolStyle_1:hover {
  background: none repeat scroll 0 0 #79c224;
  box-shadow: 0 0 0 1px #86d827 inset, 0 -25px 0 #67af1e inset, 0 0 2px #a4c76c;
}

/* // */

.coolStyle_2 {
    border: 0 none;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    height: 36px;
    border-radius: 18px;
    line-height: 22px;
    outline: none;
    background-color: #3394e6;
    color: #fff;
    border: 0 none;
    padding: 7px 22px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all ease .1s;
    transition: all ease .1s;
}
.coolStyle_2:hover {
    background-color: #46a6f6;
}

.btn_big...