Skip to content

Instantly share code, notes, and snippets.

@ab-5v
Created December 30, 2013 13:53
Show Gist options
  • Save ab-5v/8182335 to your computer and use it in GitHub Desktop.
Save ab-5v/8182335 to your computer and use it in GitHub Desktop.
Untitled
body {
padding: 10px;
background: url(http://pintaw.com/images/wallpapers/lonely-island-somewhre-in-the-ocean-Wallpaper.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.b1 {
font-family: Arial;
text-decoration: none;
background-color: #0896FF;
color: #FFF;
font-size: 1.2em;
padding: .4em .8em;
text-shadow: 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 0 1px rgba(255,255,255,.8) inset;
border: 1px solid rgba(0,0,0,.2);
background-image: linear-gradient(to bottom,rgba(0,0,0, 0) 0,rgba(0,0,0, 0.2) 100%);
-webkit-font-smoothing: antialiased;
}
.b1:hover {
box-shadow: 0 0 1px rgba(255,255,255,1) inset, 0 10px 20px rgba(255,255,255,.1) inset;
}
.b1:active {
box-shadow: 0 1px 20px rgba(0,0,0,.05) inset;
border: 1px solid rgba(0,0,0,.3);
}
.b2 {
position: relative;
padding: .4em .8em;
background-color: #0896FF;
font-family: sans-serif;
font-size: 1.2em;
color: #FFF;
text-decoration: none;
box-shadow: 0 0 1px rgba(255,255,255,.8) inset;
background-image: linear-gradient(to top,rgba(255,255,255, 0) 0,rgba(255,255,255, .2) 100%);
-webkit-font-smoothing: antialiased;
}
.b2:before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
z-index: -1;
background: #FFF;
background-image: linear-gradient(to bottom,rgba(0,0,0,.4) 0,rgba(0,0,0, 0.6) 100%);
}
.b2:hover {
box-shadow: 0 0 1px rgba(255,255,255,1) inset, 0 10px 20px rgba(255,255,255,.1) inset, 0 1px 2px rgba(0, 0, 0, .3);
}
.b2:active {
box-shadow: 0 1px 20px rgba(0,0,0,.05) inset, 0 1px 2px rgba(0, 0, 0, .3);
border: 1px solid rgba(0,0,0,.3);
}
.bb {
background: #0896FF!important;
text-shadow: none!important;
border: 2px solid #FFF!important;
padding: 5px 10px!important;
font-size5: 16px!important;
-webkit-border-radius: 3px!important;
-moz-border-radius: 3px!important;
-oborder-radius: 3px!important;
border-radius: 3px!important;
-webkit-box-shadow: 0 0 3px #AAA!important;
-moz-box-shadow: 0 0 3px #aaa!important;
-o-box-shadow: 0 0 3px #aaa!important;
box-shadow: 0 0 3px #AAA!important;
font-weight: bold;
text-align: center;
color: #FFF;
text-decoration: none;
font-family: arial;
}
.b3 {
}
<!-- content to be placed inside <body>…</body> -->
<a class="b1" href="#">Book now</a>
<br/><br/><br/>
<a class="b1" href="#">€200</a>
<br/><br/><br/>
<a class="b1" href="#">From €200</a>
<br/><br/><br/>
<a href="#" class="b2">Book now</a>
<br/><br/><br/>
<a href="#" class="bb">Book now</a>
<br/><br/><br/>
<a class="b3" href="#"><i>Book now</i></a>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment