Untitled

<style>

  /*DONT USE THIS, ONLY FOR EXAPMLE*/

  body{

    background-image:url('https://tinderlight.us/img/cartographer2.png');

  }

  h1,h2,h3,h4,h5{

    color:#fff;

  }

</style>

<div style="width:90%;height:4em;margin:0 auto;padding-top:4em;">

    <h1 class="textd textd-inverse">3DElements Revamped</h1>

  <h1 class="textd">Buttons</h1>

  <p class="threed" style="background-color:#fff;">

    <span class="btn">.btn</span>

  <span class="btn btn-success">.btn-success</span>

  <span class="btn btn-warning">.btn-warning</span>

      <br><br><br>

  <span class="btn btn-danger">.btn-danger</span>

  <span class="btn btn-info">.btn-info</span><br><br></p>

    <br><br>

    <div class="threed" style="padding:1em;background-color:#fff;">

      <h1 class="textd" style="color:#000;text-shadow:1px 1px 0px #ccc;">3D Div - .threed</h1>

      <p style="color:#000;">You can easily emulate the 3d look by applying class threed to a div or other element.</p>

    </div>

    <br><br>

    <h1 class="textd textd-inverse">Forum Elements</h1>

    <h3 class="textd textd-inverse">Input: .threed .input .pressable<br><br> <input class="threed input pressable" type="text" placeholder="3D Input Form"/></h3>

  <h3 class="textd textd-inverse" >TextArea: .threed .input .pressable<br><br> <textarea style="padding:1em;" rows="5" cols="30" class="threed input pressable" type="text" placeholder="3D Text Area"></textarea></h3>

    <h3 class="textd textd-inverse">Select: .threed .pressable<br><br> <select class="threed pressable" >

        <option>One</option>

        <option>Two</option>

        <option>Threed</option>

    </select></h3>

      <br><br><br>

/*

Author: Matt Wisniewski

http://tinderlight.us

*/

.btn{text-shadow:0 0 13px rgba(0,0,0,.3);border:1px solid #bfbfbf;border-radius:5px;box-shadow:0 4px 0 #a5a5a5,0 5px 0 #565656,0 5px 10px rgba(0,0,0,.4);background-color:#f2f2f2}.btn:hover{text-shadow:0 0 13px #fff;margin-top:-2px;background-color:#efefef;top:-2px;box-shadow:0 7px 0 #a5a5a5,0 7px 0 #565656,0 7px 7px rgba(0,0,0,.4)}.btn:active{margin-top:2px;background-color:#efefef;top:2px;box-shadow:0 2px 0 #a5a5a5,0 2px 0 #565656,0 2px 5px rgba(0,0,0,.4)}.btn-success{border:1px solid #189600;background-color:#5CB85C;color:#fff;border-radius:5px;box-shadow:0 4px 0 #007c2d,0 5px 0 #00520c,0 5px 10px rgba(0,0,0,.4)}.btn-success:hover{margin-top:-2px;background-color:#4d9d4d;top:-2px;box-shadow:0 7px 0 #007c2d,0 7px 0 #565656,0 7px 7px rgba(0,0,0,.4)}.btn-success:active{margin-top:2px;top:2px;background-color:#4d9d4d;box-shadow:0 2px 0 #007c2d,0 2px 0 #565656,0 2px 5px rgba(0,0,0,.4)}.btn-danger{border:1px solid #970000;color:#fff;background-color:#b85c5c;border-radius:5px;box-shadow:0 4px 0 #7e0000,0 5px 0 #520000,0 5px 10px rgba(0,0,0,.4)}.btn-danger:hover{margin-top:-2px;background-color:#a15151;top:-2px;box-shadow:0 7px 0 #870000,0 7px 0 #565656,0 7px 7px rgba(0,0,0,.4)}.btn-danger:active{margin-top:2px;top:2px;background-color:#a15151;box-shadow:0 2px 0 #870000,0 2px 0 #630000,0 2px 5px rgba(0,0,0,.4)}.btn-warning{border:1px solid #977400;color:#000;background-color:#ffab00;border-radius:5px;box-shadow:0 4px 0 #7e4500,0 5px 0 #523c00,0 5px 10px rgba(0,0,0,.4)}.btn-warning:hover{margin-top:-2px;background-color:#e18f00;top:-2px;box-shadow:0 7px 0 #870000,0 7px 0 #565656,0 7px 7px rgba(0,0,0,.4)}.btn-warning:active{margin-top:2px;top:2px;background-color:#e18f00;box-shadow:0 2px 0 #870000,0 2px 0 #630000,0 2px 5px rgba(0,0,0,.4)}.btn-info{border:1px solid #006297;color:#fff;background-color:#00a3ff;border-radius:5px;box-shadow:0 4px 0 #00587e,0 5px 0 #000f52,0 5px 10px rgba(0,0,0,.4)}.btn-info:hover{margin-top:-2px;background-color:#0084e1;top:-2px;box-shadow:0 7px 0 #005687,0 7px 0 #565656,0 7px 7px rgba(0,0,0,.4)}.btn-info:active{margin-top:2px;top:2px;background-color:#0084e1;box-shadow:0 2px 0 #005687,0 2px 0 #003f64,0 2px 5px rgba(0,0,0,.4)}.threed{border:1px solid #bfbfbf;border-radius:5px;box-shadow:0 4px 0 #a5a5a5,0 5px 0 #565656,0 5px 10px rgba(0,0,0,.4)}.pressable{position:relative}.pressable:focus{margin-top:2px;top:2px;outline:0;box-shadow:0 2px 0 #a5a5a5,0 2px 0 #565656,0 2px 5px rgba(0,0,0,.4)}input{padding:1em}.input:focus{margin-top:2px;top:2px;outline:0;box-shadow:0 2px 0 #a5a5a5,0 2px 0 #565656,0 2px 5px rgba(0,0,0,.4)}.textd{text-shadow:1px 1px 0 #000}.textd-inverse{text-shadow:1px 1px 0 #666}.btn{padding:.5em 1em;margin:1em;position:relative}