Skip to content

Instantly share code, notes, and snippets.

@zsimo

zsimo/design-button.markdown

Created March 7, 2014 09:30
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. zsimo revised this gist Mar 7, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    body {padding: 20%}
    body {padding: 5%}
    .button {
    text-align: center;
    font-family: Helvetica neue;
    font-weight: bold;
    width: 30%;
    width: 130px;
    background-color: black;
    color: white;
    padding: 5%;
    padding: 3%;
    }
    .button:hover {
    background-color: white;
  2. zsimo revised this gist Mar 7, 2014. No changes.
  3. zsimo created this gist Mar 7, 2014.
    7 changes: 7 additions & 0 deletions design-button.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    design button
    -------------


    A [Pen](http://codepen.io/zsimo/pen/kgpCJ) by [Simone](http://codepen.io/zsimo) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/zsimo/pen/kgpCJ/license).
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class="button">design button</div>
    21 changes: 21 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    body {padding: 20%}
    .button {
    text-align: center;
    font-family: Helvetica neue;
    font-weight: bold;
    width: 30%;
    background-color: black;
    color: white;
    padding: 5%;
    }
    .button:hover {
    background-color: white;
    border: 1px solid black;
    color: black;
    cursor: pointer;
    }
    .button:active {
    color: white;
    background-color: red;
    border: 2px solid black;
    }