Description
A big red button on your Facebook page.
Run
| View code [+] | 
Create a snippet based on this »
View in new window »
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Big Red Button</title>
<script src="http://www.kogbox.com/javascripts/prototype.js" type="text/javascript"></script>
<style>
img { border:0; }
body {
font-family:lucida grande, lucida sans, lucida sans console, helvetica, arial, sans-serif;
font-size:.68em;
color:#333;
}
h2 {
font-size:1.8em;
}
a {
color:#777;
}
a:hover {
color:#111;
}
a.button {
background: #ccc url('http://run.kogbox.com/button/buttons.jpg') no-repeat 0 -3px;
display:block;
width: 124px;
height: 123px;
float:right;
margin-top:14px;
}
a.button:hover {
background: #ccc url('http://run.kogbox.com/button/buttons.jpg') no-repeat 0 -135px;
}
a.button:active {
background: #ccc url('http://run.kogbox.com/button/buttons.jpg') no-repeat 0 -258px;
}
div#left, div#right, div#center {
float:left;
height:150px;
}
div#left {
width:40px;
background: #ccc url('http://run.kogbox.com/button/yellow-stripes.png') repeat-y left;
}
div#right {
width:40px;
background: #ccc url('http://run.kogbox.com/button/yellow-stripes.png') repeat-y right;
}
div#center {
background:#ccc;
width:316px;
}
</style>
<script>
function press_button() {
if (confirm('Are you sure?')) {
alert("Now you've done it!");
}
}
</script>
<div id="left">
</div>
<div id="center">
<a class="button" href="javascript:void(0);" onClick="press_button();"></a>
<h2>PRESS IN <br />
CASE OF <br />
EMERGENCY</h2>
<p><a href="">BIG RED BUTTON</a></p>
</div>
<div id="right">
</div>
Post to Twitter
Comments (1) | View comments for all versions (29)
jeff (author) said: 8 Jan
Uh, this is very much in progress…
Log in if you have a Kogbox account.