cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <a class="button teach-me">
  <span class="item">Teach me to file my taxes</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Tutor my 2 daughters</span>
  <span class="meta category">Other</span>
  <i class="clock"></i>
  <span class="meta expiry">Apr 2, 2013</span>
  <span class="meta cost">$40</span>
  <i class="chevron"></i>
</a>

<a class="button handyman">
  <span class="item">Painting Floor Boards
  </span>
  <span class="meta category">Handyman</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 10, 2013</span>
  <span class="meta cost">$15</span>
  <i class="chevron"></i>
</a>

<a class="button pick-up-delivery">
  <span class="item">Buy composting worms</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Dec 17, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Find a Boler trailer for sale</span>
  <span class="meta category">Other</span>
  <i class="clock"></i>
  <span class="meta expiry">exp: Apr 1, 2013</span>
  <span class="meta cost">$10</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Make my Concordia COMPILATION</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button teach-me">
  <span class="item">Teach me Japanese</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>
            
          
!
            
              /*
 * re: https://twitter.com/CodePen/status/355107665099231232
 *
 * this version uses <i> for the icons; this is the first time i've constructed icons out of pure css using pseudo elements (MUCH more on that here: http://css-tricks.com/pseudo-element-roundup/ )
 *
 * next version(s) might substitute the <i>s with @fontface & unicode range; i'd like to also try to get more semantic with this (though i think this is pretty semantic to start with... no? maybe not); i'd also like to get this modernizr'd and compatible way back to ie version who-knows-what
 *
 * feel free to hit me up w/criticisms @ jeremy.buller@gmail.com
 */

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: #e1e1e1;
  padding: 1em;
  font: normal normal normal 12px/1.333 'Helvetica Neue', arial, sans-serif;
  font-size: .75rem;
  color: #95979d;
}

.button {
  display: block;
  position: relative;
  padding: .75em 5em .75em 1em;
  border-radius: .25em;
  margin-bottom: .5em;
  background: #fff;
  box-shadow:
    /* regular bottom */
    0 .0625em .125em rgba(0, 0, 0, .125),
    /* inset bottom */
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    /* category color (left) */
    inset 1em 0 0 -.7em rgba(200, 0, 120, .5),
    /* arrow background (right) */
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.teach-me {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(0, 95, 210, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.handyman {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(20, 160, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.pick-up-delivery {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(210, 15, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.item {
  font-weight: bold;
  color: #000;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item:after {
  content: '';
  display: block;
  height: 0;
  width: 100%;
}

.meta {
  margin-left: .25em;
}

.category,
.expiry,
i {
  font-size: 8px;
  font-size: .5em;
  line-height: 2; /* 16 "px" */
}

.expiry {
  font-weight: bold;
}

.expiry:before {
  content: 'ext: ';
  font-weight: normal;
}

.cost {
  position: absolute;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 2em;
  right: 1.125em;
  top: 0;
  line-height: 2.083; /* 50 "px", should be same as button height */
}

.clock {
  display: inline-block;
  position: relative;
  width: 1.333em;
  height: 1.333em;
  margin-left: .333em;
  border: .25em solid #95979d;
  border-radius: 50%;
  vertical-align: middle;
}

.clock:before,
.clock:after {
  content: '';
  display: block;
  position: absolute;
  width: .125em;
  height: .25em;
  background: #95979d;
}

.clock:before {
  left: 50%;
  bottom: 47%;
  margin-left: -.0625em;
}

.clock:after {
  transform: rotate( 135deg );
  left: 63%;
  top: 47%;
}

.chevron {
  display: block;
  width: 1em;
  height: 1em;
  font-size: .75em;
  position: absolute;
  right: .667em;
  top: 50%;
  margin-top: -.6em; /* just eyeballing it */
}

.chevron:before,
.chevron:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, .125);
  width: .5em;
  height: .5em;
  right: .25em;
  top: 50%;
}

.chevron:before {
  transform: skewX( 45deg );
  top: 0;
  box-shadow: inset -.125em .125em .125em rgba(0, 0, 0, .25);
}
.chevron:after {
  transform: skewX( -45deg );
  bottom: 0;
  box-shadow: inset .25em .125em .125em -.125em rgba(0, 0, 0, .25);
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console