Ajax Loader
×
HTML
<style>
1
<style>
2
  /*DONT USE THIS, ONLY FOR EXAPMLE*/
3
  body{
4
    background-image:url('https://tinderlight.us/img/cartographer2.png');
5
  }
6
  h1,h2,h3,h4,h5{
7
    color:#fff;
8
  }
9
</style>
10
<div style="width:90%;height:4em;margin:0 auto;padding-top:4em;">
11
    <h1 class="textd textd-inverse">3DElements Revamped</h1>
12
  <h1 class="textd">Buttons</h1>
13
  <p class="threed" style="background-color:#fff;">
14
    <span class="btn">.btn</span>
15
  <span class="btn btn-success">.btn-success</span>
16
  <span class="btn btn-warning">.btn-warning</span>
17
      <br><br><br>
18
  <span class="btn btn-danger">.btn-danger</span>
19
  <span class="btn btn-info">.btn-info</span><br><br></p>
20
    <br><br>
21
    <div class="threed" style="padding:1em;background-color:#fff;">
22
      <h1 class="textd" style="color:#000;text-shadow:1px 1px 0px #ccc;">3D Div - .threed</h1>
23
      <p style="color:#000;">You can easily emulate the 3d look by applying class threed to a div or other element.</p>
24
    </div>
25
    <br><br>
26
    <h1 class="textd textd-inverse">Forum Elements</h1>
27
    <h3 class="textd textd-inverse">Input: .threed .input .pressable<br><br> <input class="threed input pressable" type="text" placeholder="3D Input Form"/></h3>
28
  <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>
29
    <h3 class="textd textd-inverse">Select: .threed .pressable<br><br> <select class="threed pressable" >
30
        <option>One</option>
31
        <option>Two</option>
32
        <option>Threed</option>
33
    </select></h3>
34
      <br><br><br>
 
CSS
/*
1
/*
2
 
3
Author: Matt Wisniewski
4
http://tinderlight.us
5
 
6
*/
7
 
8
.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}
 

Untitled

CSSDeck G+