Получение проблемы CSS с кнопкой отправки html

Question

Получение проблемы CSS с кнопкой отправки html

0

Я создал кнопку CSS с этого сайта cssportal.com, но после добавления на мой сайт меня отличает от оригинала. Почему я получаю границу слева и сверху.

Оригинальный вид:

но в настоящее время я получаю это:

Моя скрипка: пример

Rajnikanth 08 нояб. 2013, в 09:55

Источник

0

В каком браузере вы это пробуете?
ckv 08 нояб. 2013, в 08:38
0

Chrome и Firefox
Rajnikanth 08 нояб. 2013, в 08:39
0

Добавить border: 0;
naththedeveloper 08 нояб. 2013, в 08:40
0

jsfiddle.net/xm73g/5
Simon Dragsbæk 08 нояб. 2013, в 08:43

Показать ещё 2 комментария

Теги:

html

css

css3

button

5 ответов

1

Вы забыли удалить исходную границу браузера: http://jsfiddle.net/xm73g/2/

(border: 0px;)

CaptainCarl 08 нояб. 2013, в 07:06

1

Демо-версия JsFiddle

Его основной стиль для кнопки, потому что кнопка действует так, как ваш курсор нажимает ее, и снова возвращается в исходное положение.

Добавьте border:none; к вашему стилю кнопки.

Parixit 08 нояб. 2013, в 05:59

0

Добавить границу: нет; в коде css следующим образом:

.wpcf7-submit {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    border:none;
    color: #FFFFFF !important;
    font-size: 15px;
    text-shadow: 1px 1px 0px #3498DB;
    text-transform:uppercase;
    padding: 10px 40px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #3498DB;
    background: linear-gradient(top, #3498DB, #3498DB);
    background: -ms-linear-gradient(top, #3498DB, #3498DB);
    background: -webkit-gradient(linear, left top, left bottom, from(#3498DB), to(#3498DB));
    background: -moz-linear-gradient(top, #3498DB, #3498DB);
}
.wpcf7-submit:hover {
    color: #FFFFFF !important;
    border:none;
    background: #468CCF;
    background: linear-gradient(top, #468CCF, #63B8EE);
    background: -ms-linear-gradient(top, #468CCF, #63B8EE);
    background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
    background: -moz-linear-gradient(top, #468CCF, #63B8EE);
}

newbie java developper 08 нояб. 2013, в 07:04

0

Положите также границу: 0 на кнопку, и она будет работать

srdjans 08 нояб. 2013, в 06:21

Ещё вопросы

В каком браузере вы это пробуете?

Praveen Kumar Purushothaman · Accepted Answer · 2013-11-08T07-04-00.000Z

Дайте border: 0; к CSS...

предварительный просмотр

Обычные и Hover версии:

Скрипт: http://jsfiddle.net/xm73g/3/

.wpcf7-submit {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #FFFFFF !important;
    font-size: 15px;
    text-shadow: 1px 1px 0px #3498DB;
    text-transform:uppercase;
    padding: 10px 40px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 0;
    background: #3498DB;
    background: linear-gradient(top, #3498DB, #3498DB);
    background: -ms-linear-gradient(top, #3498DB, #3498DB);
    background: -webkit-gradient(linear, left top, left bottom, from(#3498DB), to(#3498DB));
    background: -moz-linear-gradient(top, #3498DB, #3498DB);
}