[Помогите] Скрипт Buyme (вид кнопки)

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Vintage, 27 фев 2014.

  1. Vintage

    Vintage

    Регистрация:
    31 мар 2013
    Сообщения:
    237
    Симпатии:
    39
    Установил скрипт Buyme с сайта dedushka.org, помогите поменять оформление кнопки "Купить за 1 клик" на странице товара

    Мой сайт

    Хочу чтобы выглядело так
     
    Lasted edited by : 27 фев 2014
  2. Globe-Star

    Globe-Star ...

    Регистрация:
    7 май 2013
    Сообщения:
    421
    Симпатии:
    122
    нарисуй кнопку, закинь вместо той, поправь разметку ктопки, и віровняй его, всего то делов.
     
    ababagalabaga нравится это.
  3. Vintage

    Vintage

    Регистрация:
    31 мар 2013
    Сообщения:
    237
    Симпатии:
    39
    Так кнопку рисовать не надо, она есть на сайте (в виде корзины, продолжить и тд)
     
  4. Globe-Star

    Globe-Star ...

    Регистрация:
    7 май 2013
    Сообщения:
    421
    Симпатии:
    122
    в чём прологаеться помощь поменять оформление кнопки? можно както информативней чтобы не флудить ? тоесть оформление у тебя уже есть такое как продолжить, дай хоть код кнопки чтоле чтобы сказать что править или как ты ето себе уявляешь ?
     
    ababagalabaga нравится это.
  5. Vintage

    Vintage

    Регистрация:
    31 мар 2013
    Сообщения:
    237
    Симпатии:
    39
    Хочу чтобы вид был как на картинке которую я скинул. Я прошу помощи чтобы Вы с помощью Firebug посмотрели код красной кнопки на сайте и написали куда и вместо чего вставить этот код чтобы получилось так как на картинке.
     
  6. Globe-Star

    Globe-Star ...

    Регистрация:
    7 май 2013
    Сообщения:
    421
    Симпатии:
    122
    stylesheet.css строка 25
    это
    Код:
    .b1c-submit, .b1c {
        -webkit-appearance: none;
        color: #fff;
        padding: 6px 15px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 4px;
        -webkit-border-radius: 5px;
        cursor: pointer;
        background: #0B8C0E;
        border: 0;
        background-image: linear-gradient(bottom, #0B8C0E 0%, #2DAC30 100%);
        background-image: -o-linear-gradient(bottom, #0B8C0E 0%, #2DAC30 100%);
        background-image: -moz-linear-gradient(bottom, #0B8C0E 0%, #2DAC30 100%);
        background-image: -webkit-linear-gradient(bottom, #0B8C0E 0%, #2DAC30 100%);
        background-image: -ms-linear-gradient(bottom, #0B8C0E 0%, #2DAC30 100%);
        background-image: -webkit-gradient(linear, left bottom,    left top, color-stop(0, #0B8C0E), color-stop(1, #2DAC30) );
        box-shadow: 0 2px 2px #999;
    }
    заменяем на это
    Код:
    .b1c-submit, .b1c {
    background: url("../image/button-input.png") no-repeat scroll 100% 100% transparent;
        border: 0 none;
        display: inline-block;
        font-weight: bold;
        height: 28px;
        line-height: 28px;
        padding: 0 30px 3px 0;
        text-transform: uppercase;
    }
     
    ababagalabaga и Vintage нравится это.
  7. Vintage

    Vintage

    Регистрация:
    31 мар 2013
    Сообщения:
    237
    Симпатии:
    39
    Globe-Star,
    Изменилось, но почему то не так как надо
     
  8. Globe-Star

    Globe-Star ...

    Регистрация:
    7 май 2013
    Сообщения:
    421
    Симпатии:
    122
    щас еще подправим. секунду.
    --- Добавлено, 27 фев 2014 ---
    саму картинку сылку на нее подправь ато ёё не видно ..
     
    Последнее редактирование: 27 фев 2014
    ababagalabaga нравится это.
  9. Vintage

    Vintage

    Регистрация:
    31 мар 2013
    Сообщения:
    237
    Симпатии:
    39
    Так в том то и дело что ссылка стоит нормальная, такая же как и везде, где-то происходит конфликт и картинка не отображается.
     
  10. Vintage

    Vintage

    Регистрация:
    31 мар 2013
    Сообщения:
    237
    Симпатии:
    39
    Globe-Star,
    Вставил это в основной stylesheet, посмотрите что вышло. Но не могу понять почему второй угол не отображается.
    Код:
    .b1c-submit, .b1c {
    background: url("../image/button-input.png") no-repeat scroll 100% 100% transparent;
        border: 0 none;
        display: inline-block;
        font-weight: bold;
        height: 28px;
        line-height: 28px;
        padding: 0 30px 3px 0;
        text-transform: uppercase;
    }
     
  11. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Для корректного отображения данной структуры кнопки необходимо создать вот такую штуку:
    <a class="button"><span class="leftbutton"></span><span class="centerbutton">Кнопка какая то</span><span class="rightbutton"></span></a>
    Далее.
    Стили:(примерные)
    a{
    text-decoration:none;
    display:inline-block;
    line-height: 28px;
    }
    a > span.leftbutton, a > span.rightbutton{
    display:inline-block;
    height: 28px;
    width:12px;
    }
    a > span.leftbutton{
    background: url("../image/button-input-left.png") no-repeat scroll transparent;
    }
    a > span.rightbutton{
    background: url("../image/button-input-right.png") no-repeat scroll transparent;
    }
    a > span.centerbutton{
    background: url("../image/button-input-center.png") repeat-x scroll transparent;
    text-transform: uppercase;
    }
    Данные стили и структура будет корректна во всех браузерах.
     
    Vintage нравится это.