Очень крутая кнопка для follow

Очень крутая кнопка для follow

Результат

TwitterButton

HTML

<div class="button"><a class="twitter-follow-button" href="https://twitter.com/zet_win" data-show-count="false" data-size="large">Follow @zetwin</a><script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script></div>
&nbsp;
<div class="cover">
<div class="innie">t</div>
&nbsp;
<div class="spine"></div>
&nbsp;
<div class="outie">t</div>
</div>
&nbsp;
<div class="shadow"></div>

CSS

* { box-sizing: border-box; }

body {
  padding: 5rem;
  text-align: center;
  background-image: -webkit-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #D8DFE9 100%);
  background-image: radial-gradient(circle farthest-corner at center top, #FFFFFF 0%, #D8DFE9 100%);
}

section, .button, .cover, .innie, .spine, .outie, .shadow {
  /* See it in slo-mo, you can change this */
  transition: .6s;
}

section, button { transition-timing-function: ease; }

section {
  display: inline-block;
  position: relative;
  align-self: center;
  padding: .375rem 1rem ;
  height: 2.5rem;
  background: #A9ADB6;
  border-radius: .25rem;
  perspective: 300;
  box-shadow: -1px 2px #fff, inset 1px 2px rgba(,,,.2), inset .25rem 1rem rgba(,,,.1);
}

.button { opacity: ; }

.cover {
  position: absolute;
  top: ; right: ; bottom: ; left: ;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

.innie, .outie, .spine, .shadow { position: absolute; width: 100%; }

.innie, .outie {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(,,,.1) 100%);
  border-radius: .25rem;
}

.innie {
  background-color: #67E2FE;
  text-shadow: -2px 4px rgba(,,,.2);
}

.spine {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.shadow {
  top: 100%;
  left: ;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: ;
  z-index: ;
  background-image: -webkit-linear-gradient(top, rgba(,,,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(,,,.6) 0%, transparent 100%);

}

.outie {
  background-color: #2EC8FA;
  transform: translateZ(.25rem);
  text-shadow: 2px 4px rgba(,,,.2);
}

section:hover { background: #EBEFF2; }
section:hover .button { opacity: 1; }

section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

section:hover .cover { transform: rotateX(-120deg);  }

section:hover .innie { background-color: #3ADAFC; }
section:hover .spine { background-color: #52B1E0; }
section:hover .outie { background-color: #2174A0; color: rgba(255,255,255,); }

section:hover .shadow {
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}

small {
  display: block;
  padding: 5rem;
  font: .8rem/1 sans-serif;
  color: #777;
}
small a { color: #222; text-decoration: none; border-bottom: 1px solid #ccc; }
small a:hover { border-bottom-color: #222; }

@font-face { font-family:icon; src: url('http://bennettfeely.com/fonts/icons.woff'); }

В работе

Ping-pong игра средствами HTML, CSS, JavaScript.... Пример See the Pen xOqMQm by zetwin (@zetwin) on CodePen. HTML CSS width: 100%; height: 100%; margin: 0px; p...
Простой и приятный шрифт Простой и приятный шрифт. font: 16px/1.5 "PT Sans",Arial,sans-serif; font-size: 14px; color: #837666; /* font-weight: bold; */
Внутренние тени в CSS Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, ...
Фон на всю ширину и высоту страницы... body { background: url(...) no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; -o-backgroun...
Читайте также  Фон на всю ширину и высоту страницы

Сохрани, чтобы не потерять