From 2014.igem.org

<style> .button{ font:15px Calibri, Arial, sans-serif;

/* A semi-transparent text shadow */ text-shadow:1px 1px 0 rgba(255,255,255,0.4);

/* Overriding the default underline styling of the links */ text-decoration:none !important; white-space:nowrap;

display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px;

background-repeat:no-repeat;

/* The following two rules are fallbacks, in case the browser does not support multiple backgrounds. */

background-position:bottom left; background-image:url('./images/button_bg.png');

/* Multiple backgrounds version. The background images are defined individually in color classes */

background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box;

/* Applying a default border raidus of 8px */

-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;

/* A 1px highlight inside of the button */

-moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset;

/* Animating the background positions with CSS3 */ /* Currently works only in Safari/Chrome */

-webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; }

.button:hover{

/* The first rule is a fallback, in case the browser does not support multiple backgrounds */

background-position:top left; background-position:top left, bottom right, 0 0, 0 0; }

.button:active{ /* Moving the button 1px to the bottom when clicked */ bottom:-1px; }

/* The three buttons sizes */

.button.big { font-size:30px;} .button.medium { font-size:18px;} .button.small { font-size:13px;}

/* A more rounded button */

.button.rounded{ -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; }

/* Defining four button colors */

/* BlueButton */

.blue.button{ color:#0f4b6d !important;

border:1px solid #84acc3 !important;

/* A fallback background color */ background-color: #48b5f2;

/* Specifying a version with gradients according to */

background-image: url('./images/button_bg.png'), url('./images/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb);

background-image: url('./images/button_bg.png'), url('./images/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); }

.blue.button:hover{ background-color:#63c7fe;

background-image: url('./images/button_bg.png'), url('./images/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7);

background-image: url('./images/button_bg.png'), url('./images/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); }

/* Green Button */

.green.button{ color:#345903 !important; border:1px solid #96a37b !important; background-color: #79be1e;

background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317); background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317)); }

.green.button:hover{ background-color:#89d228;

background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e); background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); }

/* Orange Button */

.orange.button{ color:#693e0a !important; border:1px solid #bea280 !important; background-color: #e38d27;

background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f); background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); }

.orange.button:hover{ background-color:#ec9732;

background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b); background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b)); }

.gray.button{ color:#525252 !important; border:1px solid #a5a5a5 !important; background-color: #a9adb1;

background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); }

.gray.button:hover{ background-color:#b6bbc0;

background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }

• {margin:0;padding:0}

body {font-family:Tahoma, Geneva, sans-serif;font-size:100%;line-height:.9375em;color:#fff;position:relative;background:url(images/body-bg.gif) center top repeat-y} input, textarea, select {font-family:Tahoma, Geneva, sans-serif;font-size:1em} .fleft {float:left} .fright {float:right} .clear {clear:both} .col-1, .col-2, .col-3 {float:left} .alignright {text-align:right} .aligncenter {text-align:center} .wrapper {width:100%;overflow:hidden} .container {width:100%} p {margin-bottom:15px} /* GLOBAL */

1. main {width:910px;margin:0 auto;height:auto !important;height:100%;min-height:100%;position:relative}
2. header, #content, #footer {font-size:0.75em}

.top-bg {background:url(images/bg-top2.jpg) no-repeat center top;position:relative;min-height:100%;height:auto !important;height:100%} .bot-bg {background:url(images/bg-bottom.jpg) no-repeat center bottom;position:relative;min-height:100%;height:auto !important;height:100%} .tail-top {background:url(images/tail-top.gif) left top repeat-x #028ecc;min-height:100%;height:auto !important;height:100%} .tail-bottom {background:url(images/tail-bottom.gif) left bottom repeat-x;position:relative;min-height:100%;height:auto !important;height:100%} .tail-bg {background:url(images/bg-tail.jpg) center top repeat-y;position:relative;min-height:100%;height:auto !important;height:100%} .tail-right-top {background:url(images/tail-right.gif) right top repeat-x;position:absolute;height:550px;right:0;top:0;width:50%} .tail-right-bot {background:url(images/tail-right-bottom.gif) right bottom repeat-x;position:absolute;height:459px;right:0;bottom:0;width:50%} .tail-right {background:#0ab7e0;height:100%;position:absolute;right:0;top:0;width:50%} /* txt, links, lines, titles */ a {color:#abe3fd;outline:none} a:hover{text-decoration:none} h1 {padding:28px 0 0 10px;font-size:3em;line-height:1em;float:left} h1 a {display:block;background: no-repeat left top;width:237px;height:40px;text-indent:-9999px} h1 span {background:url(images/slogan.jpg) no-repeat left top;text-indent:-9999px;display:block;height:22px;width:437px} h2 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:2.08em;line-height:1.1em;text-transform:uppercase;font-weight:normal;margin-bottom:23px} h3 {font-size:1em;padding:2px 0 0 0;margin-bottom:10px} /* header */

1. header {height:120px}
2. header .top-links {float:right;padding-top:37px}
3. header .top-links li {float:left}

/* nav */

1. nav {float:left;width:209px;margin-right:40px;padding:40px 0 0 0;position:relative}
2. nav ul li {width:100%}
3. nav ul li a {display:block;background:url(images/nav-bg.png) no-repeat left top;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:209px;height:32px;line-height:32px;font-size:18px;text-transform:uppercase;color:#fff;text-decoration:none;text-indent:30px;margin-bottom:7px;position:relative;z-index:10}
4. nav ul li a:hover {color:#011032}

.extra-img {position:absolute;top:316px;left:-11px} /* content */

1. content {float:left;width:661px;min-height:680px;height:auto !important;height:680px}
2. content {padding:40px 0}
3. content .section {padding:0 0 34px 0}

/* list */ ul {list-style:none}

1. content ul {padding-bottom:15px}
2. content ul li {font-weight:bold;padding-bottom:8px}
3. content ul li a {color:#fff}
4. content ul li ul {padding:10px 0 0 12px}
5. content ul li ul li {font-weight:normal}
6. content .items-list {padding:0}
7. content .items-list li {width:100%;overflow:hidden;padding-bottom:20px;font-weight:normal}
8. content .items-list li img {float:left;margin-right:20px}
9. content .articles {padding:0}
10. content .articles li {width:100%;overflow:hidden;padding-bottom:30px; font-weight:normal}
11. content .articles li img {float:left;margin-right:20px}
12. content .articles li a {color:#abe3fd}

/* forms */ input, select {vertical-align:middle;font-weight:normal} img {border:0;vertical-align:top;text-align:left}

1. contacts-form {clear:right;width:100%;overflow:hidden;padding:15px 0 0 0}
2. contacts-form fieldset {border:none;float:left}
3. contacts-form .field {clear:both}
4. contacts-form label {float:left;width:97px;line-height:20px;padding-bottom:5px;font-weight:bold}
5. contacts-form input {width:246px;padding:2px 0 2px 3px;background:#16acf1;border:1px solid #91dcfe;color:#fff}
6. contacts-form textarea {width:475px;height:293px;padding:2px 0 2px 3px;background:#16acf1;border:1px solid #91dcfe;color:#fff;margin-bottom:15px;overflow:auto}

/* boxes */ .box .left-top-corner {background:url(images/left-top-corner.png) no-repeat left top;padding-left:10px} .box .right-top-corner {background:url(images/right-top-corner.png) no-repeat right top;padding-right:10px} .box .border-top {background:url(images/border-top.png) left top repeat-x;height:10px;overflow:hidden;font-size:0;line-height:0} .box .border-left {background:url(images/border-side.png) left top repeat-y;padding-left:1px} .box .border-right {background:url(images/border-side.png) right top repeat-y;padding-right:1px} .box .inside {background:url(images/box-bg.png) left top;padding:14px 39px 23px 39px} .box .left-bot-corner {background:url(images/left-bot-corner.png) no-repeat left top;padding-left:10px} .box .right-bot-corner {background:url(images/right-bot-corner.png) no-repeat right top;padding-right:10px} .box .border-bot {background:url(images/border-bot.png) left top repeat-x;height:10px;overflow:hidden;font-size:0;line-height:0} .button {float:right;font-size:1.5em;line-height:1.1em;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:234px;text-align:center} .button span {display:block;background:url(images/button-left.png) no-repeat left top;padding-left:11px} .button span span {background:url(images/button-right.png) no-repeat right top;padding-right:12px;padding-left:0} .button span span a {display:block;background:url(images/button-bg.png) left top repeat-x;padding:6px;color:#fff;text-decoration:none;text-transform:uppercase} .button span span a:hover {color:#000} /* footer */

1. footer {height:80px;position:relative;margin:-80px auto 0 auto;width:910px}
2. footer {color:#acc3de}
3. footer .indent {padding:15px 0 0 249px}
4. footer a {color:#fff}
5. footer img {position:relative;top:-4px}
6. content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}

</style> <script>

   var i = 0;	

function gain() { i=i+1; }

   function show_result() 
   {
       var result = "http://127.0.0.1:8000/survey/1/"+i;
       var link = '<a href="'+result+'">再次点击显示结果</a>';
       document.getElementById("demo").innerHTML = link;
   }
   

</script>

<body id="page1">

   <a class="button medium blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>

   <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
   <button onClick="show_result()" id="demo">点击提交</button>

</body> </html>