Как сделать кнопку с CSS

Question

Как сделать кнопку с CSS таким образом?

Я пытался, но я не могу себе представить, как я должен сделать нижнюю линию с границами, как это .. Мой результат: http://jsfiddle.net/UPpfw/

.button_push{ 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
width: 189px; 
height: 54px; 
display: block;  
} 
.button_green{ 
    background: #4ec9a6; 
    border-bottom: 7px solid #00a09a; 
} 

я решить эту проблему и решить было: http://jsfiddle.net/TmQzX/

.button_push{ 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
width: 189px; 
height: 54px; 
display: block;  
text-align: center; 
line-height: 47px; 
text-decoration: none; 
} 
.button_white{ 
    background: #4ec9a6; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    width: 189px; 
    height: 49px; 
    display: block; 
} 
.try_button{ 
    width: 189px; 
    height: 54px; 
    position: relative; 
    top: 212px; 
    margin: auto; 
} 

Answer 1

вам нужно что-то вроде here ли?

Я понял, что вам нужна тень для вашей кнопки. и вместо border-bottom: 7px solid #00a09a;

Я предлагаю использование коробки тени

-webkit-box-shadow: 0 8px 3px -2px #00a09a; 
     -moz-box-shadow: 0 8px 3px -2px #00A09A; 
      box-shadow: 0 8px 3px -2px #00A09A; 

Answer 2

Css:

.button_push{ 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    width: 189px; 
    height: 54px; 
    line-height:54px; 
    display: block;  
} 
.button_green{ 
    background: #4ec9a6; 
    border-bottom: 5px solid #00a09a; 
    text-align:center; 
    color: white; 
    text-decoration:none; 
    font-size:25px; 
    font-weight:bold; 
    font-family: Sans-Serif; 
} 

Fiddle: http://jsfiddle.net/UPpfw/6/