Skip to content

Instantly share code, notes, and snippets.

@leotsem

leotsem/dabblet.css

Forked from chriscoyier/dabblet.css
Created January 9, 2012 01:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save leotsem/1580369 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save leotsem/1580369 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. leotsem revised this gist Jan 9, 2012. No changes.
  2. @chriscoyier chriscoyier created this gist Jan 9, 2012.
    46 changes: 46 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    .button {
    border: 1px solid #DDD;
    border-radius: 3px;
    text-shadow: 0 1px 1px white;
    box-shadow: 0 1px 1px #fff;
    font: bold 11px Sans-Serif;
    padding: 6px 10px;
    white-space: nowrap;
    vertical-align: middle;
    color: #666;
    background: transparent;
    cursor: pointer;
    }
    .button:hover {
    border-color: #999;
    background: linear-gradient(top,white 0,#E0E0E0 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    }
    .button:active, .button:focus {
    border: 1px solid #AAA;
    border-bottom-color: #CCC;
    border-top-color: #999;
    box-shadow: inset 0 1px 2px #aaa;
    background: linear-gradient(top,#E6E6E6 0,gainsboro 100%);
    }
    .button:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid #999;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin: 0 0 0 4px;
    position: relative;
    top: -1px;
    }
    .button:hover:after {
    border-top-color: black;
    }

    body {
    background: #e8e8e8;
    text-align: center;
    padding: 100px;
    }
    16 changes: 16 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@



    <button class="button" role="button">
    Button #1
    </button>

    <button class="button" role="button">
    Button #2
    </button>

    <button class="button" role="button">
    Button #3
    </button>


    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}