Как сделать кнопку с красивой рамкой - внутри класса HTML / CSS

Question

Мне было интересно, как сделать такую ​​кнопку:

http://i43.tinypic.com/e21b7.png

Основная проблема, это НЕ проблема.Хотя я не уверен, как сделать это с пользовательским изображением справа, а также с этой красивой рамкой.(CSS)

Может ли кто-нибудь мне помочь?

С наилучшими пожеланиями

Answer 1

Почему я не работаю?Вы можете использовать этот пример, чтобы увидеть, как вы можете это сделать.Не просто используйте этот код - он немного большой, не особенно эффективный, и был протестирован только в webkit.Это может быть катастрофой в IE, Opera, Firefox, кто знает.Вам нужно будет использовать CSSPie и другие префиксы вендоров, чтобы сделать этот браузер более совместимым, и это само по себе может быть бедствием.Это много кода для кнопки.

В любом случае, вы можете получить представление о том, как это делается из этого.Код:

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;
    }

Answer 2

Сначала попробуйте сами.

Тогда вам придется читать следующие CSS-атрибуты:

• градиент фона
• Граница
• коробка-тень
• граница радиуса

Answer 3

Вот, посмотрите на это демо , которое я сделал для вас.

Он работает только в webkit, но это можно исправить, посмотрев префиксы поставщиков для других браузеров.

Answer 4

Я думаю, что лучший способ сделать это - использовать фоновое изображение для него, потому что это решение, которое будет работать во всех браузерах.Также вы можете использовать CSS3, но это будет поддерживаться только некоторыми современными браузерами.

Я рекомендую вам использовать Firebug или Chrome Developer Tool, чтобы увидеть, как эта кнопка на самом деле делается, и попытаться сделать что-то подобное.