Can you help me to analyze the elements of this website ?
www.hardrock.com
I want to make it similar to this.
How i can do that ? for example, the menu how i do it move when the user scrolling down ?
this is the navigation CSS code:
html, body {
height: 100%;
}
body {
background: linear-gradient( #CCCCCC, #CCCCCC 0%, #999999 25%, #666666 50%, #999999 75%, #CCCCCC 100%);
}
nav {
max-width: 960px;
/* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
/* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
padding: 75px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
width: 100%;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: rgba(0, 0, 0, 0.7);
}
/* Demo credits stuff */
#import url(http://fonts.googleapis.com/css?family=Nixie+One);
h1#author {
position: fixed;
bottom: 50px;
text-align: center;
color: #30303f;
width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
padding: 10px 0;
font-family: "Nixie One";
text-stroke: 1px;
font-size: 30px;
text-shadow: 0 0 10px #aaaaaa;
font-family: "Roboto"
}
h1#author a {
color: #3399dd;
text-decoration: none;
}
I wouldn't just copy and paste code from someone elses work. With that said, there's probably JavaScript involved somewhere.
I would just save the web page to your desktop and take it from there. Taking bits away until you have just what you need
you can know this with help of browser Extensions , search in browser's extensions "wappalyzer"
or you can visit this site for more information wappalyzer
Related
I am working on a transparent menu for my site.This is my current code
nav{
display: inline-block;
position:overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
}
I want the menu to be transparent like this site
https://www.holeman-finch.com.
Thanks in advance
nav{
display: inline-block;
position:overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
margin-bottom:-80px
}
nav{
display: inline-block;
position: overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background-color: transparent;
}
On your header element, you can use any transparent background color, for example a very light white transparent shade which will work fine as an overlay on a darker photo:
background-color: #ffffff42;
In order for your header to actually float on top of the photo behind it, add position: fixed; or position: sticky; to it, for example. The same effect can also be achieved with position: absolute; and some extra top, right and left properties.
nav {
max-width: 960px;
/* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
/* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
padding: 75px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
width: 100%;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}
This code is working fine here but I'm using Bracket IDE in that the "mask-image" property is not working. Perhaps it appearing as red color so I think it's not working but the same code working on Codepen etc and Stack Overflow too with correct display.
The edge transparent is not coming as expected due to mask-image property which is not working on Bracket IDE.
nav {
max-width: 960px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
padding-left:80px;
}
nav ul li a {
padding: 18px;
font-family: "Open Sans";
text-transform:uppercase;
color: #000000;
font-size: 18px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.6);
color: rgba(0, 35, 122, 0.7);
}
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</nav>
I have attached screenshots.
This is the expected one:
This is bracket, why it displaying mask-image as red:
This is my output:
Sorry, it was live-preview error but while opening directly with any browser, it works as expected.
This is a quite famous checkout bar / progress bar:
http://codepen.io/whqet/pen/EJgwb/
HTML:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
<h1>Responsive Checkout Progress Bar</h1>
<! -- To test add 'active' class and 'visited' class to different li elements -->
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">
Login
</li>
<li class="previous visited">Shipping & Billing</li>
<li class="active">Shipping Options</li>
<li class="next">Review & Payment</li>
<li class="">Complete</li>
</ul>
</div>
CSS
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 50%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 30px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar {
margin: 0 20px;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 50%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
}
The thing is, the animation defined under webkit frames does not work for me in chrome.
Is there a way to make it work? Maybe even crossbrowser?
animation syntax animation: myanimation 3s 0;
can fixed with animation: myanimation 3s 0s;
You can use only unprefix rules for animations and gradients. You may add also the prefixed version before unprefixed ones.
http://codepen.io/gc-nomade/pen/ZWZXqp
I have issues with changing the CSS for the progress bar. Please review the attached image.
I would like to have the progress bar with all 10 values in one horizontal line.
I am including the script in to the html.
CSS Script:
<style>
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 50%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 20px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 50%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar li:nth-child(7):before {
content: "7";
}
ul.checkout-bar li:nth-child(8):before {
content: "8";
}
ul.checkout-bar li:nth-child(9):before {
content: "9";
}
ul.checkout-bar li:nth-child(10):before {
content: "10";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
}
</style>
HTML:
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
<h1></h1>
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">
Possible candidate
</li>
<li class="previous visited">Forwarded to manager</li>
<li class="previous visited">Phone screen</li>
<li class="previous visited">Interview</li>
<li class="previous visited">References</li>
<li class="previous visited">Medical Assessment</li>
<li class="previous visited">Backgroung Check</li>
<li class="previous visited">Offer</li>
<li class="previous visited">Hired</li>
<li class="active">Declined Offer</li>
</ul>
</div>
</body>
Alignment issue:
Try reducing the width of ul.checkout-bar li within the #media all and (min-width: 800px) { media query. It's currently 19% so you'll never get more than 5 on a row. Try 5% instead, and add vertical-align: top; to the same selector.
Fiddle: https://jsfiddle.net/yjz9Lzzg/
I was wondering how to make a button like this:
http://i43.tinypic.com/e21b7.png
The main problem, is NOT a problem. Although, I am not sure how to make it with a custom image at the right, as well as that nice border. (CSS)
Can someone help me?
Kindest Regards
Why aren't I working? You can use this example to see how you might do it. Don't just use this code - It's a little big, not particularly efficient, and has only been tested in webkit. This could be a disaster in IE, Opera, Firefox, who knows. You'd need to use CSSPie and more vendor prefixes to get this more browser compliant, and that might be a distaster in itself. It's a lot of code for a button.
At any rate, you can get the idea of how it's done from this.
jsfiddle
Code:
html
<div id="btn">
<p>200 <span>cr</span></p>
<span class="plus">+</span>
</div>
css
html {
height: 100%;
font-family: sans-serif;
}
body {
height: 100%;
color: #fff;
background: #505050;
background-attachment: fixed;
background: -webkit-gradient(linear, top, bottom, from(#09465d), to(#0f536e));
background: -webkit-linear-gradient( 90deg, #09465d, #0f536e);
background: -moz-linear-gradient( 90deg, #09465d, #0f536e);
background: linear-gradient( 90deg, #09465d, #0f536e);
}
#btn {
font-size: 13px;
text-shadow: 0 -1px 0 rgba(0,0,0,.9);
margin: 20px;
background: -webkit-gradient(linear, top, bottom, from(#1d4763), to(#215f86));
background: -webkit-linear-gradient( 90deg, #1d4763, #215f86);
background: -moz-linear-gradient( 90deg, #1d4763, #215f86);
background: linear-gradient( 90deg, #1d4763, #215f86);
overflow: hidden;
display: inline-table;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
border-radius: 3px;
cursor: pointer;
}
#btn:hover {
background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
background: -moz-linear-gradient( 90deg, #19405a, #1d587d);
background: linear-gradient( 90deg, #19405a, #1d587d);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
border-radius: 3px;
}
#btn:active {
background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
background: -moz-linear-gradient( 90deg, #19405a, #1d587d);
background: linear-gradient( 90deg, #19405a, #1d587d);
-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
border-radius: 3px;
}
#btn p, span, p span {
height: 30px;
line-height: 30px;
display: inline-block;
margin: 0;
}
#btn p {
padding: 0 12px;
border-right: 1px solid rgba(0,0,0,.1);
}
#btn span.plus {
padding: 0 12px;
font-size: 16px;
font-weight: bold;
border-left: 1px solid rgba(255,255,255,.1);
}
#btn p span {
font-size: 10px;
}
First, try it out by yourself.
Then you'll have to read on the following CSS attributes:
background gradient
border
box-shadow
border-radius
Here, look at this demo I made for you.
It only works in webkit, but you can fix that by looking into the vendor prefixes for other browsers.
I think the best way to do it is using a background image for it, because it is a solution that would work in all browsers. Also you may use CSS3, but that will only be soported by some modern browsers.
I recomend you to use firebug or chrome developer tool to see how that button is actually done, and try to do something similar.