cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
               
<div class="soc-nav f-row ctr-dist">
<a href="#" title="LinkedIn" target="_blank" class="smn-btn">
	<div class="smn-out">
		<div class="smn-in">
<div class="smn front linked linked-fr"><span class="f-col nowrap ctr-mid"><i class="fa fa-linkedin" aria-hidden="true"></i></span></div>
<div class="smn back"></div>
<div class="smn top"></div>
<div class="smn bot"></div>
<div class="smn left linked linked-lft"></div>
<div class="smn right"></div>
</div><!--end smn-in-->
</div><!--end smn-out-->
</a>

<a href="#" title="Google+" target="_blank" class="smn-btn">
	<div class="smn-out">
		<div class="smn-in">
<div class="smn front goog goog-fr"><span class="f-col nowrap ctr-mid"><i class="fa fa-google-plus-official" aria-hidden="true"></i></span></div>
<div class="smn back"></div>
<div class="smn top"></div>
<div class="smn bot"></div>
<div class="smn left goog goog-lft"></div>
<div class="smn right"></div>
</div><!--end smn-in-->
</div><!--end smn-out-->
</a>

 <a href="#" title="Facebook" target="_blank" class="smn-btn">
	<div class="smn-out">
		<div class="smn-in">
<div class="smn front facebk facebk-fr"><span class="f-col nowrap ctr-mid"><i class="fa fa-facebook" aria-hidden="true"></i></span></div>
<div class="smn back"></div>
<div class="smn top"></div>
<div class="smn bot"></div>
<div class="smn left facebk facebk-lft"></div>
<div class="smn right"></div>
</div><!--end smn-in-->
</div><!--end smn-out-->
</a>

  <a href="#" title="GitHub" target="_blank" class="smn-btn">
 	<div class="smn-out">
		<div class="smn-in">
<div class="smn front git git-fr"><span class="f-col nowrap ctr-mid"><i class="fa fa-github-alt" aria-hidden="true"></i></span></div>
<div class="smn back"></div>
<div class="smn top"></div>
<div class="smn bot"></div>
<div class="smn left git git-lft"></div>
<div class="smn right"></div>
</div><!--end smn-in-->
</div><!--end smn-out-->
</a>
 <a href="#" title="@BLINGUISTICS" target="_blank" class="smn-btn">
	<div class="smn-out">
		<div class="smn-in">
<div class="smn front tweet tweet-fr"><span class="f-col nowrap ctr-mid"><i class="fa fa-twitter" aria-hidden="true"></i></span></div>
<div class="smn back"></div>
<div class="smn top"></div>
<div class="smn bot"></div>
<div class="smn left tweet tweet-lft"></div>
<div class="smn right"></div>
</div><!--end smn-in-->
</div><!--end smn-out-->
</a>
	</div>
            
          
!
            
              html {
  margin: 15% auto;
}
/**********************/
/* Flex specs*/
/**********************/
.f-row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
}
.f-col {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.nowrap {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.ctr-mid {
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.ctr-dist {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/**********************/
/* Container for buttons
/**********************/
.soc-nav {
  box-sizing: border-box;
  border: 1px solid #000;
  height: 50px;
  margin: 0 auto;
  padding: 0;
	font-size:16px;
}

/**********************/
/* Buttons (parent/child elements)
/**********************/

/* FontAwesome style
/**********************/

/* Hold icons in a span */
.smn span {
  width: 100%;
  height: 100%;
  line-height: 40px;
	font-size:1rem;
}

.smn span > .fa {
  font-size: 2em;
}

/* Main link element style
/**********************/
a.smn-btn {
  display: block;
  width: 40px;
  height: 40px;
  text-decoration: none;
}

/* Cube outer container
/**********************/
.smn-out {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  perspective: 800px;
  perspective-origin: 50% 20px;
}

/* Cube inner container
/**********************/
.smn-in {
  position: relative;
  width: 40px;
  margin: 0 auto;
  transform-style: preserve-3d;
}

/* Cube faces
/**********************/

/* global style*/
.smn-in > div {
  position: absolute;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-family: 'FontAwesome';
}

/* positions, styles for individual faces */
.back {
  transform: translateX(0)
    translateY(0)
    translateZ(-20px)
    rotateX(0)
    rotateY(180deg)
    rotateZ(0)
    scale(1.0, 1.0)
    scaleZ(1.0);
}

.right {
  transform: rotateX(0)
    rotateY(-270deg)
    rotateZ(0)
    translateX(20px)
    translateY(0)
    translateZ(0)
    scale(1.0, 1.0)
    scaleZ(1.0);
  transform-origin: top right;
}

.left {
  transform: rotateX(0)
    rotateY(270deg)
    rotateZ(0)
    translateX(-20px)
    translateY(0)
    translateZ(0)
    scale(1.0, 1.0)
    scaleZ(1.0);
  transform-origin: center left;
  -moz-box-shadow: inset 1em 0 .64em .24em rgba(0, 0, 0, 0.33);
  -webkit-box-shadow: inset 1em 0 .64em .24em rgba(0, 0, 0, 0.33);
  -o-box-shadow: inset 1em 0 .64em .24em rgba(0, 0, 0, 0.33);
  box-shadow: inset 1em 0 .64em .24em rgba(0, 0, 0, 0.33);
}

.top {
  transform: rotateX(-90deg)
    rotateY(0)
    rotateZ(0)
    translateX(0)
    translateY(-20px)
    translateZ(0)
    scale(1.0, 1.0)
    scaleZ(1.0);
  transform-origin: top center;
}

.bot {
  transform: rotateX(90deg)
    rotateY(0)
    rotateZ(0)
    translateX(0)
    translateY(20px)
    translateZ(0)
    scale(1.0, 1.0)
    scaleZ(1.0);
  transform-origin: bottom center;
  background-color: #999;
  -webkit-box-shadow: inset -1em 0 .64em .24em rgba(0, 0, 0, 0.49);
  -moz-box-shadow: inset -1em 0 .64em .24em rgba(0, 0, 0, 0.49);
  box-shadow: inset -1em 0 .64em .24em rgba(0, 0, 0, 0.49);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !Important;
}

.front {
  transform: rotateX(0)
    rotateY(0)
    rotateZ(0)
    translateX(0)
    translateY(0)
    translateZ(20px)
    scale(1.0, 1.0)
    scaleZ(1.0);
  background-color: #fff;
}

/* Hide backface, except on bottom */
.front, .left, .right, .top, .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Font and left faces get a colored outline */
.front, .left {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: -2px;
}

/* Pseudo element for drop shadow*/
a.smn-btn:link .smn-out:before {
  position: absolute;
  content: '';
  display: inline-block;
  width: 40px;
  border-radius: 20%;
  transform: translateX(0)
    translateY(30px)
    translateZ(0)
    rotate(0)
    rotateZ(0)
    skew(-2deg, -2deg)
    scale(0.1, 0.1)
    scaleZ(1.0);
  -moz-box-shadow: -.5em .24em 1em .24em rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: -.5em .24em 1em .24em rgba(0, 0, 0, 0.4);
  box-shadow: -.5em .24em 1em .24em rgba(0, 0, 0, 0.4);
  transition: all .35s ease-in-out .1s;
}

/* Pseudo element for :visited*/
a.smn-btn:link .smn:after {
  content: '';
  position: inherit;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  z-index: 10;
  display: none;
}

/* Specific style for social media*/
/* linkedin */
.linked, .front.linked, .left.linked {
  color: #007bb6;
  outline-color: #007bb6;
}
.linked-lft, .front.linked:after {
  background-color: #007bb6;
}

/* twitter */
.tweet, .front.tweet, .left.tweet {
  color: #00aced;
  outline-color: #00aced;
}
.tweet-lft, .front.tweet:after {
  background-color: #00aced;
}

/* github */
.git, .front.git, .left.git {
  color: #000;
  outline-color: #000;
}

.git-lft, .front.git:after {
  background-color: #000;
}

/* facebook */
.facebk, .front.facebk, .left.facebk {
  color: #3b5998;
  outline-color: #3b5998;
}
.facebk-lft, .front.facebk:after {
  background-color: rgba(59, 89, 152, 1);
}

/* Google plus */
.goog, .front.goog, .left.goog {
  color: #dd4b39;
  outline-color: #dd4b39;
}
.goog-lft, .front.goog:after {
  background-color: #dd4b39;
}

/* Main link behavior
/**********************/

/* Base positioning for cube faces*/
a.smn-btn:link .smn-in {
  transform: rotateX(0)
    rotateY(0)
    rotateZ(0)
    translateX(0)
    translateY(0)
    translateZ(0)
    scale(1.0, 1.0)
    scaleZ(1.0);
  transition: all .35s ease-in-out .1s;
}

/* Front face shadow (hidden) */
a.smn-btn:link .smn-in .front {
  transition: all .35s ease-in-out .1s;
  -webkit-box-shadow: inset -.1em .1em .22em .05em rgba(0, 0, 0, 0.0);
  -moz-box-shadow: inset -.1em .1em .22em .05em rgba(0, 0, 0, 0.0);
  box-shadow: inset -.1em .1em .22em .05em rgba(0, 0, 0, 0.0);
}

/* Show visited indicator for visited */
a.smn-btn:visited .smn:after {
  display: block;
}

/* Show drop shadow on hover, active, focus*/
a.smn-btn:hover .smn-out:before,
a.smn-btn:active .smn-out:before,
a.smn-btn:focus .smn-out:before {
  transition: all .35s ease-in-out .1s;
  transform: translateX(0)
    translateY(30px)
    translateZ(0)
    rotate(0)
    rotateZ(0)
    skew(-2deg, -2deg)
    scale(1.0, 1.0)
    scaleZ(1.0);
}

/* Animate cube on hover, active, focus*/
a.smn-btn:hover .smn-in, a.smn-btn:active .smn-in, a.smn-btn:focus .smn-in {
  transform: rotateY(30deg)
    rotateX(20deg)
    rotateZ(0)
    translateX(0)
    translateY(0)
    translateZ(20px)
    scale(1.0, 1.0)
    scaleZ(1.0);
  z-index: 1;
}

/* Show face shadow on animate*/
a.smn-btn:hover .smn-in .front,
a.smn-btn:active .smn-in .front,
a.smn-btn:focus .smn-in .front {
  transition: all .35s ease-in-out .1s;
  -moz-box-shadow: inset -.2em .2em .42em .05em rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset -.2em .2em .42em .05em rgba(0, 0, 0, 0.12);
  box-shadow: inset -.2em .2em .42em .05em rgba(0, 0, 0, 0.12);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console