Invert the shadows of the button vertically - html

I have these beautiful push buttons:
body {
background: #555;
padding: 100px 300px;
}
.level-buttons {
display: flex;
flex-direction: row;
justify-content: center;
}
.level-buttons .pusher {
margin: 2px;
padding: 15px 80px 12px 80px;
border-radius: 5px;
background: -webkit-linear-gradient(top, #cc0000 0%, #990000 100%);
color: rgba(255, 255, 255, 0.7);
font-family: sans-serif;
text-decoration: none;
text-shadow: 0 -1px 0 maroon;
border: 2px solid black;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.7), inset 0 3px 1px #ff1a1a, inset 0 9px 1px -5px rgba(255, 255, 255, 0.8);
/* edge-highlight*/
}
.level-buttons .pusher:hover {
background: -webkit-radial-gradient(50% 65%, ellipse closest-corner, #e60000 0%, #cc0000 80%, #b30000 100%);
box-shadow: 0 0 50px rgba(255, 51, 51, 0.6), 0 2px 6px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.7), inset 0 3px 1px #f50000, inset 0 9px 1px -5px rgba(255, 255, 255, 0.6), inset 0 6px 3px 1px #990000;
/* inner color*/
}
.level-buttons .pusher:active {
background: -webkit-radial-gradient(center, ellipse cover, #e60000 0%, #cc0000 80%, #b30000 100%);
box-shadow: 0 0 20px rgba(255, 51, 51, 0.4), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
/* edge-highlight 1*/
}
<div class="level-buttons">
Pusher
Pusher
Pusher
</div>
I tried to invert the shadows vertically in order to get the illusion we are looking at them from above with no luck!
How can we invert the shadows vertically in the proper way?
Edit: Here is what I mean by invert vertically:

Related

I have two different buttons, but the CSS applies the hover color of the second HTML button to the first. How do you fix this?

I'm trying to have two different color buttons. When I tried, it makes the hover color for ".hicodestled" the hover color of ".styled. Also, the ".hicodestled" button is just idle when hovering on it. When trying to add different classes, it still does not distinguish the two buttons.
.styled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.styled:hover {
background-color: rgba(0, 255, 0, 1);
}
.styled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.hicodestled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 220, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.styled:hover {
background-color: rgba(0, 220, 220, 1);
}
.styled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
<a href="http://point90.42web.io" style="text-decoration: none;">
<font color="#ffffff">
<button class="styled" type="button">
<b>Back up</b>
</button>
<button class="hicodestled" type="button">
<b>View code</b>
</button>
</font>
</a>
Edit: I now realize this is a garbage question as I was not looking at the CSS.

this seems to be a problem with the overwriting of the hicodestled button class. In the code below i changed the hover color and replaced the second styled button declaration for hicodestled. The code works as it should now but the colors are currently set to red and a darker shade of green for testing purposes. I suggest you change those according to your needs.
<style>
.styled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 0, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.styled:hover {
background-color: red
}
.styled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.hicodestled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 220, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.hicodestled:hover {
background-color: green;
}
.hicodestled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
</style>
<a href=http://point90.42web.io style=text-decoration:none><font color=#ffffff>
<button class="styled"
type="button">
<b>Back up</b>
</button>
<button class="hicodestled"
type="button">
<b>View code</b>
</button>
</font></a>

CSS shadow property isnt showing on an polygon object

I'm trying to style a div that I shaped with the clip-path: polygon CSS property. I want to give it some shadows so it looks a bit three dimensional.
The problem is that the shadow property doesn't work. When I inspect the element in the browser, the CSS code for shadow is grayed out.
I tried to make the shadow the following ways and none of them worked
box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0,
0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
filter: drop-shadow(0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px
rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2));
filter: box-shadow 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px
rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
Here is the HTML code:
<div id="first" class="row">
<div class="container-fluid">
...some content inside...
</div>
</div>
And SCSS code:
#first {
padding-top: 60px;
padding-bottom: 30px;
-webkit-box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
.container-fluid {
background: red;
clip-path: polygon(0 0%, 100% 0%, 100% 88%, 0 100%);
}
}

Try instead with filter: drop-shadow()
#first {
padding-top: 60px;
padding-bottom: 30px;
filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, 0.3));
}
#first .container-fluid {
background: red;
clip-path: polygon(0 0%, 100% 0%, 100% 88%, 0 100%);
}
<div id="first" class="row">
<div class="container-fluid">
...some content inside...
</div>
</div>

It's working fine. Try changing the h-offset, v-offset, blur spread, color
#first {
padding-top: 60px;
padding-bottom: 30px;
/*-webkit-box-shadow: 0 -9px 9px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);*/
/*box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);*/
-webkit-box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.14), 5px 10px 18px rgba(0, 0, 0, 0.12), 5px 10px 18px rgba(0, 0, 0, 0.2);
box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.14), 5px 10px 18px rgba(0, 0, 0, 0.12), 5px 10px 18px rgba(0, 0, 0, 0.2);
}
.container-fluid {
background: red;
clip-path: polygon(0 0%, 100% 0%, 100% 88%, 0 100%);
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div id="first" class="row">
<div class="container-fluid">
...some content inside...
</div>
</div>

how to put multiple background to a button without conflict with css

I have a 3D button with different background styles. I want to set a small icon to it. But some ways it wont show and other ways the background colors changes or disappears
.button {
text-decoration: none;
color: white;
padding: 18px;
width:170px;
text-transform: uppercase;
display: inline-block;
text-shadow: -2px 2px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
padding-right: 50px;
margin: 10px;
margin-top:15px;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
/*
Kinda replicates keyline but looks dumb.
#include filter(
drop-shadow(0 1px 0 rgba(blue, 0.2))
drop-shadow(0 -1px 0 rgba(blue, 0.2))
);
*/
}
.button.blue {
background: -moz-linear-gradient(top, #a2d3e9, #7abedf);
background: -webkit-linear-gradient(top, #a2d3e9, #7abedf);
background: linear-gradient(to bottom, #a2d3e9, #7abedf) ;
box-shadow: -1px 0px 1px #6fadcb, 0px 1px 1px #54809d, -2px 1px 1px #6fadcb, -1px 2px 1px #54809d, -3px 2px 1px #6fadcb, -2px 3px 1px #54809d, -4px 3px 1px #6fadcb, -3px 4px 1px #54809d, -5px 4px 1px #6fadcb, -4px 5px 1px #54809d, -6px 5px 1px #6fadcb, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.button.yellow {
background: -moz-linear-gradient(top, #f2d851, #ecc92b);
background: -webkit-linear-gradient(top, #f2d851, #ecc92b);
background: linear-gradient(to bottom, #f2d851, #ecc92b);
color: black;
text-shadow: -2px 2px 0 rgba(255, 255, 255, 0.3);
box-shadow: -1px 0px 1px #d9b826, 0px 1px 1px #b1961d, -2px 1px 1px #d9b826, -1px 2px 1px #b1961d, -3px 2px 1px #d9b826, -2px 3px 1px #b1961d, -4px 3px 1px #d9b826, -3px 4px 1px #b1961d, -5px 4px 1px #d9b826, -4px 5px 1px #b1961d, -6px 5px 1px #d9b826, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.button.yellow:after, .button.yellow:before {
background: black;
}
.button.yellow:after {
-webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
}
.button.yellow:before {
-webkit-filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35));
filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35));
}
.button.yellow .arrow {
-webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
}
.button:active {
box-shadow: none;
-moz-transform: translate3d(-6px, 6px, 0);
-ms-transform: translate3d(-6px, 6px, 0);
-webkit-transform: translate3d(-6px, 6px, 0);
transform: translate3d(-6px, 6px, 0);
}
.button .arrow {
-webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
}
.button:after {
-webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
}
.button:after, .button:before {
position: absolute;
content: " ";
right: 15px;
top: 14px;
width: 6px;
height: 18px;
background: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
display: block;
z-index: 2;
}
.button:before {
height: 14px;
top: 26px;
right: 16px;
z-index: 3;
-moz-transform: rotate(-137deg);
-ms-transform: rotate(-137deg);
-webkit-transform: rotate(-137deg);
transform: rotate(-137deg);
-webkit-filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15));
filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15));
}
<div class="row">
CARDLESS<br>
VIDEO CONFERANCE<br>
</div>
when i add background: url();
to .button.blue {}
if i add it before the last background nothing happens
if i add it after it , the background color disappear and the image appear

Try this
background: linear-gradient( rgba(122, 122, 126, 1), rgba(122, 122, 126, 0.65) ), url(../images/bg/bg10.jpg) no-repeat top center fixed;

i added this to html and it worked
<div class="" style="height:13%;width:100%;bottom:0;left:0;position:absolute;opacity:1;background-color:Silver;z-index:1000">
<div class="row">
<a href="#" class="button blue" onclick="javascript:onKeyPress('B')">
<img src="images/gesture.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt="">CARDLESS<br>
</a>
<a href="#" class="button yellow" >
<img src="images/call.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt=""> VIDEO CONFERANCE<br>
</a>
</div>

make button and div same height side by side

In the bottom right corner I have 1 button to open a chat, then a div where it displays the current online users and then another button to get to the top of the page.
I use the <button> tag on the buttons but the padding is different for button and div. If I use the same padding the div will be larger, not by much but it annoys me.
Is there any easy way to fix this? They are all position:fixed;
Here is my Code:
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#backToTop').fadeIn('slow');
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function() {
$("html, body").animate({
scrollTop: 0
}, 500);
//$("html, body").scrollTop(0); //For without animation
return false;
});
});
.chat-wrapper {
position: fixed;
display: inline-block;
width: 100%;
right: 0;
bottom: 0;
z-index: 1000;
}
.top {
float: right;
background-color: #1d1d1d;
border-top: 1px solid #000;
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
z-index: 2000;
}
.chat-online {
width: 75px;
float: right;
padding: 7px;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #1d1d1d;
border-top: 1px solid #000;
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
z-index: 2000;
}
#button {
background: none;
border: none;
padding: 8px;
color: #05c7f7;
}
#backToTop {
background: none;
border: none;
padding: 8px;
color: #05c7f7;
}
#button:hover {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:hover {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:active {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:active {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:focus {
outline: 0;
}
#backToTop:focus {
outline: 0;
}
.chat-icon {
float: right;
border-left: 1px solid #000;
background-color: #1d1d1d;
border-top: 1px solid #000;
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
z-index: 2000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-wrapper">
<div class="chat-content">
<div class="top">
<button class="fa fa-chevron-up" id="backToTop" name="top" aria-hidden="true"></button>
</div>
<div class="chat-online" tooltip="Current users online (<5min)">
Online : <span class="fr" id="status">
<script type="text/javascript">
var int = self.setInterval("update()", 1000);
function update() {
$('#status').load('/online.php');
}
</script>
</span>
</div>
<div class="chat-icon">
<button class="fa fa-comments-o" id="button" name="chat" aria-hidden="true"></button>
</div>
</div>
</div>

Use a div element not a button one :)

How to make a button with nice border - inside class HTML / CSS

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.