サルワカさん-ボタン：サルワカさんのCSSをコクーン専用に書き換え（noindexしています）

ボタン

立体的なボタン

<div class="gsss_btn"><a href="#" class="btn-square">BUTTON</a></div>

.gsss_btn .btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.gsss_btn .btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

<div class="gsss_btn"><a href="#" class="btn-square-shadow">BUTTON</a></div>

.gsss_btn .btn-square-shadow {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.gsss_btn .btn-square-shadow:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
}

<div class="gsss_btn"><a href="#" class="btn-square-emboss">BUTTON</a></div>

.gsss_btn .btn-square-emboss {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  /*ボタン色*/
  color: #4868ad;
  /*ボタン色より暗く*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #627295;
  border-radius: 3px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.gsss_btn .btn-square-emboss:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

<div class="gsss_btn"><a href="#" class="btn-square-raised">BUTTON</a></div>

.gsss_btn .btn-square-raised {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  /*ボタン色*/
  color: #668ad8;
  /*ボタン色と同じに*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #627295;
  border-radius: 3px;
  /*角の丸み*/
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}

.gsss_btn .btn-square-raised:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

<div class="gsss_btn"><a href="#" class="btn-square-slant">BUTTON</a></div>

.gsss_btn .btn-square-slant {
  display: inline-block;
  position: relative;
  padding: 0.5em 1.4em;
  text-decoration: none;
  background: #668ad8;
  /*ボタン色*/
  color: #FFF;
  border-bottom: solid 5px #36528c;
  /*ボタン色より暗めに*/
  border-right: solid 5px #5375bd;
  /*ボタン色より暗めに*/
}

.gsss_btn .btn-square-slant:before {
  content: " ";
  position: absolute;
  bottom: -5px;
  left: -1px;
  width: 0;
  height: 0;
  border-width: 0 6px 6px 0px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FFF;
}

.gsss_btn .btn-square-slant:after {
  content: " ";
  position: absolute;
  top: -1px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 0px 6px 6px 0px;
  border-style: solid;
  border-color: #FFF;
  border-bottom-color: transparent;
}

.gsss_btn .btn-square-slant:active {
  /*ボタンを押したとき*/
  border: none;
  -webkit-transform: translate(6px, 6px);
  transform: translate(6px, 6px);
}

.gsss_btn .btn-square-slant:active:after,
.btn-square-slant:active:before {
  content: none;
  /*ボタンを押すと線が消える*/
}

<div class="gsss_btn"><a href="#" class="btn-square-above-look">BUTTON</a></div>

.gsss_btn .btn-square-above-look {
  display: inline-block;
  position: relative;
  padding: 0.35em 1em;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  text-decoration: none;
}

.gsss_btn .btn-square-above-look:before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: -webkit-calc(100% - 16px);
  width: calc(100% - 16px);
  height: 0;
  border: solid 8px transparent;
  border-bottom-color: #8eacec;/*ボタン色より明るめの色に*/
}

.gsss_btn .btn-square-above-look:active {
  /*押したとき*/
  padding: 0.32em 0.9em;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.gsss_btn .btn-square-above-look:active:before {
  width: -webkit-calc(100% - 12px);
  width: calc(100% - 12px);
}

.gsss_btn .btn-square-above-look:active:before {
  top:-12px;
  border-width: 6px;
}

<div class="gsss_btn"><a href="#" class="btn-square-pop">BUTTON</a></div>

.gsss_btn .btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.gsss_btn .btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

<div class="gsss_btn"><a href="#" class="btn-square-so-pop">BUTTON</a></div>

.btn-square-so-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;
  border: solid 2px #d27d00;/*線色*/
}

.btn-square-so-pop:active {
  /*押したとき*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

<div class="gsss_btn"><a href="#" class="btn-square-toy">BUTTON</a></div>

.btn-square-toy {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  background: #00BCD4;/*背景色*/
  color: #00BCD4;/*=背景色*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
  border-bottom: solid 2px #118e9e;
  border-radius: 4px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}

.btn-square-toy:active {
  /*押したとき*/
  border-bottom: solid 2px #00BCD4;
  box-shadow: none;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}

<div class="gsss_btn"><a href="#" class="btn-square-soft">BUTTON</a></div>

.gsss_btn .btn-square-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #f9a9ae;
  width: 120px;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.gsss_btn .btn-square-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデーションを明るく*/
}

<div class="gsss_btn"><a href="#" class="btn-text-3d">BUTTON</a></div>

.gsss_btn .btn-text-3d {
  text-decoration: none;
  font-weight: bold;
  font-size: 37px;
  color: #799dec;
  text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.gsss_btn .btn-text-3d:active {
  top: 4px;
  text-shadow: none;
}

<–>

  <div class="gsss_btn"><a href="#" class="btn-sticky">BUTTON</a></div>

.gsss_btn .btn-sticky {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #f7f7f7;
  border-left: solid 6px #ff7c5c;/*左線*/
  color: #ff7c5c;/*文字色*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.gsss_btn .btn-sticky:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}

  <div class="gsss_btn"><a href="#" class="btn-real">
      <i class="fa fa-power-off"></i>
    </a></div>

.btn-real {
  display: inline-block;
  text-decoration: none;
  color: rgba(152, 152, 152, 0.43);
  /*アイコン色*/
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 40px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #b5b5b5;
}

.btn-real i {
  line-height: 80px;
}

.btn-real:active {
  /*押したとき*/
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: none;
}

  <div class="gsss_btn">
    <a href="#" class="btn-real-dent">
      <i class="fa fa-power-off"></i>
    </a>
  </div>

.gsss_btn .btn-real-dent {
  /*周りの凹み*/
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: rgba(3, 169, 244, 0.54);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  background: #f7f7f7;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}
.gsss_btn .btn-real-dent i {
  /*ボタン自体*/
  position: absolute;
  content: '';
  width: 80px;
  height: 80px;
  line-height: 80px;
  left: 10px;
  top: 9px;
  border-radius: 50%;
  font-size: 40px;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #b5b5b5;
}

.gsss_btn .btn-real-dent .fa:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #d8d8d8;
}

フラットデザインなボタン

  <div class="gsss_btn">
    <a href="#" class="btn-flat-simple">
      <i class="fa fa-caret-right"></i> BUTTON
    </a>
  </div>

  .gsss_btn .btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  transition: .4s;
}

.gsss_btn .btn-flat-simple:hover {
  background: #00bcd4;
  color: white;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-border">BUTTON</a>
  </div>

  .gsss_btn .btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.gsss_btn .btn-flat-border:hover {
  background: #67c5ff;
  color: white;
}

 <div class="gsss_btn">
    <a href="#" class="btn-flat-double-border">BUTTON</a>
  </div>

.gsss_btn .btn-flat-double-border {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: double 4px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}
.gsss_btn .btn-flat-double-border:hover {
  background: #fffbef;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-dashed-border">BUTTON</a>
  </div>

.gsss_btn .btn-flat-dashed-border {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: dashed 1px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}
.gsss_btn .btn-flat-dashed-border:hover {
  border-style: dotted;
  color: #679efd;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-dashed-filled">BUTTON</a>
  </div>

.gsss_btn .btn-flat-dashed-filled {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: dashed 1px #67c5ff;
  background: #f2fcff;
  border-radius: 3px;
  transition: .4s;
}

.gsss_btn .btn-flat-dashed-filled:hover {
  background: #cbedff;
  color: #FFF;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-vertical-border">BUTTON</a>
  </div>

.gsss_btn .btn-flat-vertical-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px #668ad8;
  border-right: solid 4px #668ad8;
  color: #668ad8;
  background: #e1f3ff;
  transition: .4s;
}

.gsss_btn .btn-flat-vertical-border:hover {
  background: #668ad8;
  color: #FFF;
}

  <div class="gsss_btn">
    <a href="#" class="btn-border-bottom">BUTTON</a>
  </div>

.gsss_btn .btn-border-bottom {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0;
  text-decoration: none;
  color: #67c5ff;
}

.gsss_btn .btn-border-bottom:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top:100%;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
  transition: .2s;
}

.gsss_btn .btn-border-bottom:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}

  <div class="gsss_btn">
    <a href="#" class="btn-horizontal-border">BUTTON</a>
  </div>

.gsss_btn .btn-horizontal-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 12px 0 8px;
  text-decoration: none;
  color: #67c5ff;
  transition: .4s;
}

.gsss_btn .btn-horizontal-border:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top:100%;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
  transition: .2s;
}

.gsss_btn .btn-horizontal-border:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top:0;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
  transition: .2s;
}

.gsss_btn .btn-horizontal-border:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}

.gsss_btn .btn-horizontal-border:hover:after {
  top: 3px;
}

  <div class="gsss_btn">
    <a href="#" class="btn-vertical-border">BUTTON</a>
  </div>

.gsss_btn .btn-vertical-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 5px 11px 5px 15px;
  text-decoration: none;
  color: #67c5ff;
  transition: .4s;
}

.gsss_btn .btn-vertical-border:before {
  position: absolute;
  display: inline-block;
  content: '';
  width: 4px;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
}

.gsss_btn .btn-vertical-border:after {
  position: absolute;
  display: inline-block;
  content: '';
  width: 4px;
  height: 100%;
  top:0;
  left: 100%;
  border-radius: 3px;
  background:#67c5ff;
}

.gsss_btn .btn-vertical-border:hover:before, .btn-vertical-border:hover:after {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}

  <div class="gsss_btn">
    <a href="#" class="btn-right-radius">BUTTON</a>
  </div>

.gsss_btn .btn-right-radius {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  border-radius: 0 15px 15px 0;
  transition: .4s;
}

.gsss_btn .btn-right-radius:hover {
  background: #636363;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-logo">
      <i class="fa fa-chevron-right"></i> BUTTON
    </a>
  </div>

.gsss_btn .btn-flat-logo {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #00bcd4;
  transition: .4s;
}

.gsss_btn .btn-flat-logo:hover {
  background: #1ec7bb;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-bottom-border">
      <span>BUTTON</span>
    </a>
  </div>

.gsss_btn .btn-flat-bottom-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 7px 10px 10px 10px;
  text-decoration: none;
  color: #FFF;
  background: #a180dc;
  transition: .4s;
}

.gsss_btn .btn-flat-bottom-border > span {
  border-bottom: solid 2px #FFF;
}

.gsss_btn .btn-flat-bottom-border:hover {
  background: #91b5fb;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-horizontal-border">
      <span>BUTTON</span>
    </a>
  </div>

.gsss_btn .btn-flat-horizontal-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 1em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #ff7f7f;
  transition: .4s;
}

.gsss_btn .btn-flat-horizontal-border > span {
  border-bottom: solid 2px #FFF;
  border-top: solid 2px #FFF;
}

.gsss_btn .btn-flat-horizontal-border:hover span {
  padding: 0.1em 0;
}

  <div class="gsss_btn">
    <a href="#" class="btn-top-radius">BUTTON</a>
  </div>

.gsss_btn .btn-top-radius {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 8px 10px 5px 10px;
  text-decoration: none;
  color: #FFA000;
  background: #fff1da;
  border-bottom: solid 4px #FFA000;
  border-radius: 15px 15px 0 0;
  transition: .4s;
}

.gsss_btn .btn-top-radius:hover {
  background: #ffc25c;
  color: #FFF;
}

  <div class="gsss_btn">
    <a href="#" class="btn-flat-stripe">BUTTON</a>
  </div>

.gsss_btn .btn-flat-stripe {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px #668ad8;
  border-right: solid 4px #668ad8;
  color: #668ad8;
  text-shadow: 0 0 5px white;
  padding: 0.5em 1em;
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  transition: .4s;
}

.gsss_btn .btn-flat-stripe:hover {
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 5px,#e9f4ff 5px, #e9f4ff 9px);
}

  <div class="gsss_btn">
    <a href="#" class="btn-sf-like">BUTTON</a>
  </div>

.gsss_btn .btn-sf-like {
  position: relative;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.73);
  padding: 0.3em 0.5em;
  background: #00bcd4;
  border-top: solid 3px #00a3d4;
  border-bottom: solid 3px #00a3d4;
  transition: .4s;
}

.gsss_btn .btn-sf-like:hover {
  text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83),
               6px 0px 15px rgba(255, 255, 240, 0.83);
}

  <div class="gsss_btn">
    <a href="#" class="btn-stitch">BUTTON</a>
  </div>

.gsss_btn .btn-stitch {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  color: #FFF;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 5px #668ad8;
  border: dashed 1px #FFF;
}

.gsss_btn .btn-stitch:hover {
  border: dotted 1px #FFF;
}

グラデーションが美しいボタン

  <div class="gsss_btn">
    <a href="#" class="btn-gradient-simple">BUTTON</a>
  </div>

.gsss_btn .btn-gradient-simple {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  background-image: linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
  transition: .4s;
}

.gsss_btn .btn-gradient-simple:hover {
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}

  <div class="gsss_btn">
    <a href="#" class="btn-gradient-3d">BUTTON</a>
  </div>

.gsss_btn .btn-gradient-3d {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  color: rgba(0, 69, 212, 0.47);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #5e7fca;

}

.gsss_btn .btn-gradient-3d:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

 <div class="gsss_btn">
    <a href="#" class="btn-gradient-3d-simple">BUTTON</a>
  </div>

.gsss_btn .btn-gradient-3d-simple {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #5e7fca;
}

.gsss_btn .btn-gradient-3d-simple:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

  <div class="gsss_btn">
    <a href="#" class="btn-gradient-3d-orange">BUTTON</a>
  </div>

.gsss_btn .btn-gradient-3d-orange {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
}

.gsss_btn .btn-gradient-3d-orange:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

  <div class="gsss_btn">
    <a href="#" class="btn-gradient-radius">BUTTON</a>
  </div>

.gsss_btn .btn-gradient-radius {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
}

.gsss_btn .btn-gradient-radius:hover {
  background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}

  <div class="gsss_btn">
    <a href="#" class="btn-gradient-flat">BUTTON</a>
  </div>

.gsss_btn .btn-gradient-flat {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
  transition: .4s;
}

.gsss_btn .btn-gradient-flat:hover {
  background-image: linear-gradient(#6795fd 0%, #67ceff 70%);
}

円形（丸）

  <div class="gsss_btn">
    <a href="#" class="btn-circle-flat">BUTTON</a>
  </div>

.gsss_btn .btn-circle-flat {
  display: inline-block;
  text-decoration: none;
  background: #87befd;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  transition: .4s;
}

.gsss_btn .btn-circle-flat:hover {
  background: #668ad8;
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-stitch">BUTTON</a>
  </div>

.gsss_btn .btn-circle-stitch {
  display: inline-block;
  text-decoration: none;
  background: #87befd;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #87befd;
  border: dashed 1px #FFF;
  transition: .4s;
}

.gsss_btn .btn-circle-stitch:hover {
  background: #668ad8;
  box-shadow: 0px 0px 0px 5px #668ad8;
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-border">BUTTON</a>
  </div>

.gsss_btn .btn-circle-border {
  display: inline-block;
  text-decoration: none;
  background: #8cd460;
  color: rgba(255, 255, 255, 0.47);
  font-weight: bold;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #8cd460;
  border: solid 2px rgba(255, 255, 255, 0.47);
  transition: .4s;
}

.gsss_btn .btn-circle-border:hover {
  border-style: dashed;
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-3d">BUTTON</a>
  </div>

.gsss_btn .btn-circle-3d {
  display: inline-block;
  text-decoration: none;
  background: #ff8181;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #bd6565;
  transition: .4s;
}

.gsss_btn .btn-circle-3d:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-3d-emboss">BUTTON</a>
  </div>

.gsss_btn .btn-circle-3d-emboss {
  display: inline-block;
  text-decoration: none;
  background: #ffba78;
  color: #ffba78;
  width: 120px;
  height: 120px;
  font-size: 21px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #d29963;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.43), 1px 1px rgba(0, 0, 0, 0.49);
  transition: .4s;
}
.gsss_btn .btn-circle-3d-emboss:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
  border-bottom: none;
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-3d-dent">BUTTON</a>
  </div>

.gsss_btn .btn-circle-3d-dent {
  display: inline-block;
  text-decoration: none;
  background: #5dc3d0;
  color: rgb(82, 142, 150);
  width: 122px;
  font-size: 20px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  border-bottom: solid 3px #549fa9;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.65);
  transition: .4s;
}

.gsss_btn .btn-circle-3d-dent:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
  border-bottom: none;
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-border-simple">BUTTON</a>
  </div>

.gsss_btn .btn-circle-border-simple {
  display: inline-block;
  text-decoration: none;
  color: #668ad8;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  border: solid 2px #668ad8;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .4s;
}

.gsss_btn .btn-circle-border-simple:hover {
  background: #b3e1ff;
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-border-double">BUTTON</a>
  </div>

.gsss_btn .btn-circle-border-double {
  display: inline-block;
  text-decoration: none;
  color: #668ad8;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  border: double 4px #668ad8;
  text-align: center;
  overflow: hidden;
  transition: .6s;
}

.gsss_btn .btn-circle-border-double:hover {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-fishy">BUTTON</a>
  </div>

.gsss_btn .btn-circle-fishy {
  display: inline-block;
  text-decoration: none;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
  transition: .4s;
}

.gsss_btn .btn-circle-fishy:hover {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}

  <div class="gsss_btn">
    <a href="#" class="btn-circle-kirby">BUTTON</a>
  </div>

.gsss_btn .btn-circle-kirby {
  display: inline-block;
  text-decoration: none;
  color: #f9a9ae;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background-image: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.gsss_btn .btn-circle-kirby:active {
  box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.32);
  background-image: linear-gradient(#fed6e3 0%, #ffcfcf 100%);
}

おしゃれなSNSボタン

  <div class="gsss_btn">
    <a href="#" class="btn-social-icon-twitter">
      <span class="btn-social-icon-twitter__square"><i class="fa fa-twitter"></i></span> Follow Me
    </a>
  </div>

.gsss_btn .btn-social-icon-twitter {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #1da1f3;
  font-size: 25px;
  text-decoration: none;
}

.gsss_btn .btn-social-icon-twitter:hover {
  color:#88daff;
  transition: .5s;
}

.gsss_btn .btn-social-icon-twitter__square {
  border-radius: 10px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  color: #FFF;
  background: #1da1f3;
}

.gsss_btn .btn-social-icon-twitter__square i {
  line-height: 50px;
}

  <div class="gsss_btn">
    <a href="#" class="btn-social-icon-facebook">
      <span class="btn-social-icon-facebook__square"><i class="fa fa-facebook"></i></span> Follow Me
    </a>
  </div>

.gsss_btn .btn-social-icon-facebook {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #4966a0;;
  font-size: 25px;
  text-decoration: none;
}

.gsss_btn .btn-social-icon-facebook:hover {
  color:#668ad8;
  transition: .5s;
}

.gsss_btn .btn-social-icon-facebook__square {
  border-radius: 10px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  color: #FFF;
  background: #4966a0;;
}

.gsss_btn .btn-social-icon-facebook__square .fa-facebook {
  position: absolute;
  bottom: -3px;
  right: 6px;
  font-size: 42px;
}

  <div class="gsss_btn">
    <a href="#" class="btn-social-icon-instagram">
      <span class="btn-social-icon-instagram__square"><i class="fa fa-instagram"></i></span> Follow Me
    </a>
  </div>

.gsss_btn .btn-social-icon-instagram {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #2e6ca5;
  font-size: 25px;
  text-decoration: none;
}

.gsss_btn .btn-social-icon-instagram:hover {
  color:#668ad8;
  transition: .5s;
}

.gsss_btn .btn-social-icon-instagram__square {
  border-radius: 13px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden
}

.gsss_btn .btn-social-icon-instagram__square:before {
  content: '';
  position: absolute;
  top: 23px;
  left: -18px;
  width: 60px;
  height: 60px;
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}

.gsss_btn .btn-social-icon-instagram__square .fa-instagram {
  color:white;
  line-height: 50px;
  position: relative;
  z-index: 2
}

  <div class="gsss_btn">
    <a href="#" class="btn-social-long-twitter">
      <i class="fa fa-twitter"></i> <span>Follow Me</span>
    </a>
  </div>

.gsss_btn .btn-social-long-twitter {
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: #1da1f3;
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.gsss_btn .btn-social-long-twitter .fa-twitter {
  text-shadow: 2px 2px 0px #4287d6;
  font-size: 30px;
}

.gsss_btn .btn-social-long-twitter span {
  display:inline-block;
  transition: .5s;
}

.gsss_btn .btn-social-long-twitter:hover span {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

  <div class="gsss_btn">
    <a href="#" class="btn-social-long-facebook">
      <i class="fa fa-facebook"></i> <span>Follow Me</span>
    </a>
  </div>

.gsss_btn .btn-social-long-facebook {
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: #4966a0;
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.gsss_btn .btn-social-long-facebook .fa-facebook {
  text-shadow: 2px 2px 1px #224282;
  font-size: 30px;
}

.gsss_btn .btn-social-long-facebook span {
  /*テキスト*/
  display:inline-block;
  transition: .5s;
}

.gsss_btn .btn-social-long-facebook:hover span {
  /*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

  <div class="gsss_btn">
    <a href="#" class="btn-social-long-insta">
      <i class="fa fa-instagram"></i> <span>Follow Me</span>
    </a>
  </div>

.gsss_btn .btn-social-long-insta {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.gsss_btn .btn-social-long-insta:before {
  /*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.gsss_btn .btn-social-long-insta .fa-instagram {
  /*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.gsss_btn .btn-social-long-insta span {
  /*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s}

.gsss_btn .btn-social-long-insta:hover span {
  /*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

<div class="gsss_btn">
    <!--以下twitter-->
    <a href="#" class="btn-social-circle btn-social-circle--twitter">
      <i class="fa fa-twitter"></i>
    </a>

    <!--以下facebook-->
    <a href="#" class="btn-social-circle btn-social-circle--facebook">
      <i class="fa fa-facebook"></i>
    </a>

    <!--以下pocket-->
    <a href="#" class="btn-social-circle btn-social-circle--pocket">
      <i class="fa fa-get-pocket"></i>
    </a>

    <!--以下feedly-->
    <a href="#" class="btn-social-circle btn-social-circle--feedly">
      <i class="fa fa-rss"></i>
    </a>
  </div>

.gsss_btn .gsss_btn .btn-social-circle {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
  color: #FFF;
  width: 50px;
  height: 50px;
  line-height: 30px;
  padding: 5px;
  font-size: 25px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18);
  transition: .2s;
}
.gsss_btn .gsss_btn .btn-social-circle .fa {
  line-height: 30px;
}
.gsss_btn .gsss_btn .btn-social-circle:hover {
  box-shadow: none;
}

.gsss_btn .gsss_btn .btn-social-circle--twitter {
  background: #1da1f3;
  border: solid 5px #1da1f3;
}

.gsss_btn .gsss_btn .btn-social-circle--facebook {
  background: #3b75d4;
  border: solid 5px #3b75d4;
}

.gsss_btn .gsss_btn .btn-social-circle--pocket {
  background: #ef4d4d;
  border: solid 5px #ef4d4d;
}

.gsss_btn .gsss_btn .btn-social-circle--feedly {
  background: #7ece46;
  border: solid 5px #7ece46;
}

  <div class="gsss_btn">
    <!--以下twitter-->
    <a href="#" class="btn-social-flat">
      <span class="btn-social-flat-icon btn-social-flat-icon--twitter">
        <i class="fa fa-twitter"></i>
      </span>
      <span class="btn-social-flat-text">TWEET</span>
    </a>

    <!--以下facebook-->
    <a href="#" class="btn-social-flat">
      <span class="btn-social-flat-icon btn-social-flat-icon--facebook">
        <i class="fa fa-facebook"></i>
      </span>
      <span class="btn-social-flat-text">SHARE</span>
    </a>

    <!--以下pocket-->
    <a href="#" class="btn-social-flat">
      <span class="btn-social-flat-icon btn-social-flat-icon--pocket">
        <i class="fa fa-get-pocket"></i>
      </span>
      <span class="btn-social-flat-text">POCKET</span>
    </a>

    <!--以下feedly-->
    <a href="#" class="btn-social-flat">
      <span class="btn-social-flat-icon btn-social-flat-icon--feedly">
        <i class="fa fa-rss"></i>
      </span>
      <span class="btn-social-flat-text">FEEDLY</span>
    </a>
  </div>

.gsss_btn .btn-social-flat {
  color: #484848;
  display: inline-block;
  height: 50px;
  font-size: 25px;
  line-height: 50px;
  background: #eaeef1;
  text-decoration: none;
  margin: 1em;
}

.gsss_btn .btn-social-flat-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
}
.gsss_btn .btn-social-flat-icon i {
  font-size: 25px;
  line-height: 50px;
  transition: .3s;
}
.gsss_btn .btn-social-flat-text {
  display: inline-block;
  width: 120px;
  text-align: center;
}

.gsss_btn .btn-social-flat-icon--twitter {
  background:#1da1f3;
}
.gsss_btn .btn-social-flat-icon--facebook {
  background:#3b75d4;
}
.gsss_btn .btn-social-flat-icon--feedly {
  background:#7ece46;
}
.gsss_btn .btn-social-flat-icon--pocket {
  background:#fd7171;
}
.gsss_btn .btn-social-flat:hover .btn-social-flat-icon i {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

<!--以下twitter-->
    <a href="#" class="btn-social-isometric">
      <span class="btn-social-isometric-icon btn-social-isometric-icon--twitter">
        <i class="fa fa-twitter"></i>
      </span>
      <span class="btn-social-isometric-text">TWEET</span>
    </a>

    <!--以下facebook-->
    <a href="#" class="btn-social-isometric">
      <span class="btn-social-isometric-icon btn-social-isometric-icon--facebook">
        <i class="fa fa-facebook"></i>
      </span>
      <span class="btn-social-isometric-text">SHARE</span>
    </a>

    <!--以下pocket-->
    <a href="#" class="btn-social-isometric">
      <span class="btn-social-isometric-icon btn-social-isometric-icon--pocket">
        <i class="fa fa-get-pocket"></i>
      </span>
      <span class="btn-social-isometric-text">POCKET</span>
    </a>

    <!--以下feedly-->
    <a href="#" class="btn-social-isometric">
      <span class="btn-social-isometric-icon btn-social-isometric-icon--feedly">
        <i class="fa fa-rss"></i>
      </span>
      <span class="btn-social-isometric-text">FEEDLY</span>
    </a>
  </div>

.gsss_btn .btn-social-isometric {
  color: #484848;
  display: inline-block;
  height: 50px;
  font-size: 25px;
  line-height: 46px;
  background: #eaeef1;
  text-decoration: none;
  box-sizing: border-box;
  margin: 1em;
}
.gsss_btn .btn-social-isometric-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
}
.gsss_btn .btn-social-isometric-icon i {
  line-height: 46px;
  font-size: 25px;
}
.gsss_btn .btn-social-isometric-text {
  display: inline-block;
  width: 120px;
  height: 50px;
  text-align: center;
  border-bottom: solid 4px #dcdcdc;
}
.gsss_btn .btn-social-isometric-icon--twitter {
  background:#1da1f3;
  border-bottom: solid 4px #1484ca;
}
.gsss_btn .btn-social-isometric-icon--facebook {
  background:#3b75d4;
  border-bottom: solid 4px #2a5caf;
}
.gsss_btn .btn-social-isometric-icon--feedly {
  background:#7ece46;
  border-bottom: solid 4px #65b130;
}
.gsss_btn .btn-social-isometric-icon--pocket {
  background:#fd7171;
  border-bottom: solid 4px #ef4d4d;
}
.gsss_btn .btn-social-isometric:hover {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}
.gsss_btn .btn-social-isometric:hover .btn-social-isometric-text, .gsss_btn .btn-social-isometric:hover .btn-social-isometric-icon {
  border-bottom: none;
}

<div class="gsss_btn">
    <div class="btn-social-giza">
      <!--以下twitter-->
      <a href="#" class="btn-social-giza-twitter">
        <span class="fa-stack">
          <i class="fa fa-certificate fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
      </a>
      <!--以下facebook-->
      <a href="#" class="btn-social-giza-facebook">
        <span class="fa-stack">
          <i class="fa fa-certificate fa-stack-2x"></i>
          <i class="fa fa-facebook fa-stack-1x"></i>
        </span>
      </a>
      <!--以下feedly-->
      <a href="#" class="btn-social-giza-feedly">
        <span class="fa-stack">
          <i class="fa fa-certificate fa-stack-2x"></i>
          <i class="fa fa-rss fa-stack-1x"></i>
        </span>
      </a>
      <!--以下pocket-->
      <a href="#" class="btn-social-giza-pocket">
        <span class="fa-stack">
          <i class="fa fa-certificate fa-stack-2x"></i>
          <i class="fa fa-get-pocket fa-stack-1x"></i>
        </span>
      </a>
    </div>
  </div>

.gsss_btn .btn-social-giza a {
  display: inline-block;
  text-decoration: none;
  font-size: 25px;
}
.gsss_btn .btn-social-giza .fa-stack-1x {
  color: white;
  font-size: 18px;
}
.gsss_btn .btn-social-giza .fa-stack-2x {
  transition: .3s;
}
.gsss_btn .btn-social-giza .btn-social-giza-twitter .fa-stack-2x {
  color: #74c1f8;
}
.gsss_btn .btn-social-giza .btn-social-giza-facebook .fa-stack-2x {
  color: #668ad8;
}
.gsss_btn .btn-social-giza .btn-social-giza-pocket .fa-stack-2x {
  color: #f79393;
}
.gsss_btn .btn-social-giza .btn-social-giza-feedly .fa-stack-2x {
  color: #acde71;
}
.gsss_btn .btn-social-giza a:hover .fa-stack-2x {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

<div class="gsss_btn">
    <div class="btn-social-phone">
      <!--以下twitter-->
      <a href="#">
        <span class="fa-stack">
          <i class="fa fa-tablet fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x btn-social-phone-twitter"></i>
        </span>
      </a>
      <!--以下facebook-->
      <a href="#">
        <span class="fa-stack">
          <i class="fa fa-tablet fa-stack-2x"></i>
          <i class="fa fa-facebook fa-stack-1x btn-social-phone-facebook"></i>
        </span>
      </a>
      <!--以下feedly-->
      <a href="#">
        <span class="fa-stack">
          <i class="fa fa-tablet fa-stack-2x"></i>
          <i class="fa fa-rss fa-stack-1x btn-social-phone-feedly"></i>
        </span>
      </a>
      <!--以下pocket-->
      <a href="#">
        <span class="fa-stack">
          <i class="fa fa-tablet fa-stack-2x"></i>
          <i class="fa fa-get-pocket fa-stack-1x btn-social-phone-pocket"></i>
        </span>
      </a>
    </div>
  </div>

.gsss_btn .btn-social-phone a {
  text-decoration: none;
  line-height: 70px;
  font-size: 18px;
  margin: 5px;
}
.gsss_btn .btn-social-phone .fa-stack-2x {
  color: black;
  font-size:70px;
}
.gsss_btn .btn-social-phone .fa-stack-1x{
  display: inline-block;
  position: relative;
  font-size: 20px;
  top: 12px;
  left:5px;
  transition: .4s;
}
.gsss_btn .btn-social-phone-twitter {
  color: #74c1f8;
}
.gsss_btn .btn-social-phone-facebook {
  color: #668ad8;
}
.gsss_btn .btn-social-phone-pocket {
  color: #f79393;
}
.gsss_btn .btn-social-phone-feedly {
  color: #acde71;
}
.gsss_btn .btn-social-phone a:hover .fa-stack-1x {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

  <div class="gsss_btn">
    <!--twitter-->
    <a class="btn-social-circle btn-social-circle--twitter">
      <i class="fa fa-twitter"></i>
    </a>
    <!--facebook-->
    <a class="btn-social-circle btn-social-circle--facebook">
      <i class="fa fa-facebook"></i>
    </a>
    <!--はてぶ-->
    <a class="btn-social-circle btn-social-circle--hatebu">
      B!
    </a>
    <!--pocket-->
    <a class="btn-social-circle btn-social-circle--pocket">
      <i class="fa fa-get-pocket"></i>
    </a>
    <!--feedly-->
    <a class="btn-social-circle btn-social-circle--feedly">
      <i class="fa fa-rss"></i>
    </a>
  </div>

.gsss_btn .btn-social-circle {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  transition: .3s;
}
.gsss_btn .btn-social-circle i {
  line-height: 50px;
}
.gsss_btn .btn-social-circle:hover　{
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.gsss_btn .btn-social-circle--twitter {
  color: #22b8ff;
  background-image: linear-gradient(#aeecff 0%, #57c8ff 100%);
}
.gsss_btn .btn-social-circle--facebook {
  color: #6183f3;
  background-image: linear-gradient(#b5d3ff 0%, #6b8bff 100%);
}
.gsss_btn .btn-social-circle--hatebu {
  color: #49a8fb;
  background-image: linear-gradient(#d2efff 0%, #76befb 100%);
}
.gsss_btn .btn-social-circle--pocket {
  color: #ff6d82;
  background-image: linear-gradient(#ffcfd7 0%, #ff7285 100%);
}
.gsss_btn .btn-social-circle--feedly {
  color: #60d245;
  background-image: linear-gradient(#b9ffca 0%, #80e067 100%);
}

  <div class="gsss_btn">
    <!--twitter-->
    <a class="btn-social-square btn-social-square--twitter">
      <i class="fa fa-twitter"></i>
    </a>
    <!--facebook-->
    <a class="btn-social-square btn-social-square--facebook">
      <i class="fa fa-facebook"></i>
    </a>
    <!--はてぶ-->
    <a class="btn-social-square btn-social-square--hatebu">
      B!
    </a>
    <!--pocket-->
    <a class="btn-social-square btn-social-square--pocket">
      <i class="fa fa-get-pocket"></i>
    </a>
    <!--feedly-->
    <a class="btn-social-square btn-social-square--feedly">
      <i class="fa fa-rss"></i>
    </a>
  </div>

.gsss_btn .btn-social-square {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin:2px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
}
.gsss_btn .btn-social-square i {
  line-height:50px;
}
.gsss_btn .btn-social-square:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.gsss_btn .btn-social-square--twitter {
  background: #22b8ff;
}
.gsss_btn .btn-social-square--facebook {
  background: #6680d8;
}
.gsss_btn .btn-social-square--hatebu {
  background: #49a8fb;
}
.gsss_btn .btn-social-square--pocket {
  background: #ff6d82;
}
.gsss_btn .btn-social-square--feedly {
  background: #7bda72;
}

  <div class="gsss_btn">
    <a href="#" class="btn-twitter-follow">
      <i class="fa fa-user-plus"></i> <span>フォローする</span>
    </a>
  </div>

.gsss_btn .btn-twitter-follow {
  text-decoration: none;
  background-image: linear-gradient(#fff,#f5f8fa);
  border: 1px solid #e6ecf0;
  border-radius: 4px;
  color: #393e42;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 14px;
  position: relative;
 }

.gsss_btn .btn-twitter-follow i {
  color: #1da1f3;
}

.gsss_btn .btn-twitter-follow:hover {
  background-color: #e6ecf0;
  background-image: linear-gradient(#fff,#e6ecf0);
  border-color: #e6ecf0;
}

  <div class="gsss_btn">
    <a href="#" class="insta_btn3">
      <i class="fab fa-instagram"></i>
      <div>Follow Me</div>
    </a>
  </div>

.gsss_btn .insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.gsss_btn .insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.gsss_btn .insta_btn3 div {
  position: relative;
}

.gsss_btn .insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:inline-block;
    position: relative;
    transition: .5s
}

.gsss_btn .insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

ユニーク・かっこいい系

  <div class="gsss_btn">
    <a href="#" class="btn-edge">
      BUTTON
    </a>
  </div>

.gsss_btn .btn-edge {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0 30px;
  font-size: 19px;
  height: 40px;
  line-height: 40px!;
  background: #51587b;
  font-size: 20px;
  color: rgb(255, 255, 255);
  transition: .4s;
}

.gsss_btn .btn-edge:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 21px white;
  border-bottom: solid 41px transparent;
  z-index: 1;
  transition: .4s;
}

.gsss_btn .btn-edge:after {
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 21px transparent;
  border-bottom: solid 41px white;
  z-index: 1;
  transition: .4s;
}

.gsss_btn .btn-edge:hover:before, .gsss_btn .btn-edge:hover:after {
  border-left-width: 25px;
}

.gsss_btn .btn_edge:hover {
  background: #2c3148;
}

  <div class="gsss_btn">
    <a href="#" class="btn-partial-line">
      <i class="fa fa-caret-right"></i> BUTTON
    </a>
  </div>

.gsss_btn .btn-partial-line {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  border-bottom: solid 3px #668ad8;
  border-left: solid 3px #668ad8;
  color: #668ad8;
  transition: .4s;
}

.gsss_btn .btn-partial-line:hover {
  padding-left: 0.7em;
  padding-right: 0.3em;
}

  <div class="gsss_btn">
    <a href="#" class="btn-cross">
      BUTTON
    </a>
  </div>

.gsss_btn .btn-cross {
  display: inline-block;
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  text-decoration: none;
  font-weight: bold;
  color: #03A9F4;
}
.gsss_btn .btn-cross:before, .gsss_btn .btn-cross:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
  transition: .3s;
}
.gsss_btn .btn-cross:before {
  left: 7px;
}
.gsss_btn .btn-cross:after {
  right: 7px;
}
.gsss_btn .btn-cross:hover:before {
  top: 0px;
  left:0;
  height: 100%;
}
.gsss_btn .btn-cross:hover:after {
  top: 0px;
  right: 0;
  height: 100%;
}

  <div class="gsss_btn">
    <a href="#" class="btn-brackets">
      BUTTON
    </a>
  </div>

.gsss_btn .btn-brackets {
  display: inline-block;
  position: relative;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #000;
  transition: .4s;
}
.gsss_btn .btn-brackets:hover {
  color:#ff7f7f;
}
.gsss_btn .btn-brackets:before, .gsss_btn .btn-brackets:after {
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.gsss_btn .btn-brackets:before {
  border-left: solid 1px #ff7f7f;
  border-top: solid 1px #ff7f7f;
  border-bottom: solid 1px #ff7f7f;
  left: 0;
}
.gsss_btn .btn-brackets:after {
  content: '';
  border-top: solid 1px #ff7f7f;
  border-right: solid 1px #ff7f7f;
  border-bottom: solid 1px #ff7f7f;
  right: 0;
}

<div class="gsss_btn">
    <a href="#" class="btn-bottom-jagged">
      BUTTON
    </a>
  </div>

.gsss_btn .btn-bottom-jagged {
  position: relative;
  padding: 0.35em 0.7em 0.2em;
  background: #668ad8;
  color: #FFF;
  text-decoration: none;
}
.gsss_btn .btn-bottom-jagged:before {
  content: '';
  position: absolute;
  z-index: -2;
  height: 10px;
  box-sizing: border-box;
  width: 100%;
  top: 100%;
   top: calc(100% - 2px);
  left: 0;
  background: linear-gradient(-135deg, #668ad8 4px, transparent 0) 0 4px,
              linear-gradient(135deg, #668ad8 4px, #fff 0) 0 4px;
  background-color: #668ad8;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 10px 10px;
  transition: .2s;
}
.gsss_btn .btn-bottom-jagged:hover:before {
  background-size: 13px 10px;
}

<div class="gsss_btn">
    <div class="btns">
      <p>止</p>
      <a class="wash_btn stop_btn">
      svgタグで画像のSVGコードが入ります。
      </a>
    </div>

    <div class="btns">
      <p>おしり</p>
      <a class="wash_btn">
      svgタグで画像のSVGコードが入ります。
      </a>
    </div>

    <div class="btns">
      <p>やわらか</p>
      <a class="wash_btn">
      svgタグで画像のSVGコードが入ります。
      </a>
    </div>

    <div class="btns">
      <p>ビデ</p>
      <a class="wash_btn">
        svgタグで画像のSVGコードが入ります。
      </a>
    </div>
  </div>

.gsss_btn .btns {
  width: 130px;
    display: inline-block;
    text-align: center;
    }

.gsss_btn .btns p {
  margin:0.5em 0;
  font-size: 23px;
  font-family: 'ＭＳ Ｐゴシック','MS PGothic','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

.gsss_btn .wash_btn {
    display: inline-block;
    text-decoration: none;
    background: #EFEFEF;/*背景色*/
    width: 130px;/*幅*/
    height: 130px;/*高さ*/
    padding: 15px;/*ボタン内の余白*/
    border-radius: 50%;/*丸くする*/
    box-sizing: border-box;
    text-align: center;/*文字を中央に*/
    border: solid 2px #EFEFEF;
    box-shadow: 4px 4px 9px 0px rgba(255,255,255,0.45) inset, -4px -4px 9px 0px rgba(0, 0, 0, 0.06) inset;/*ボタンに立体感を出す*/
    cursor: pointer;/*カーソル当てたときの動き*/
    transition: .3s;/*押したときの動きを滑らかに*/
}

.gsss_btn .wash_btn:active {/*ボタンを押したとき*/
    box-shadow: 3px 3px 6px 0px rgba(157, 157, 157, 0.07) inset, -2px -2px 3px 0px rgba(255, 255, 255, 0.52) inset;/*影を変化させる*/
}

.gsss_btn .stop_btn {/*止ボタン用*/
    background: #f7aa5d;/*色をオレンジに*/
    border: solid 3px #ffcb97;
    box-shadow: 7px 7px 14px 0px rgba(255,255,255,0.35) inset, -7px -7px 14px 0px rgba(0, 0, 0, 0.06) inset;
}