У меня есть кнопка "Отправить".

Ответ 1

Вам нужно будет удалить границу (скос) следующим образом:

input {
    border: 0;
}

Ответ 2

Вы можете установить атрибуты границ в CSS. Я всегда думаю

  border: 1px solid black;

выглядит хорошо.

Ответ 3

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

Ответ 4

Если вы хотите использовать собственное изображение кнопки, вам нужно будет определить свои собственные кнопки, например:

<div class="button">
  <a href="#">Login</a>
</div>

И CSS:

div.button
{
    position: relative;
    display: block;
    float: left;
    margin: 0;
    border: 0;
    padding: 0;
    background: url(button_right_normal.gif) no-repeat right top;
}

div.button a
{
    position: relative;
    display: block;
    margin: 0;
    border: 0;
    padding: 2px 15px 5px 15px;
    height: 18px;
    background: url(button_left_normal.gif) no-repeat left top;
    color: #ffffff;
    font-size: 11px;
    text-decoration: none;
}

Ответ 5

Вы можете удалить границу, используя свойства CSS границы. Например:

<input type=button value="Hello" style="border:0">

(Конечно, вы можете переместить это в таблицу стилей.)

Ответ 6

Вы можете использовать ЛЮБОЙ img в качестве фона (например, прозрачные закругленные углы), только в css добавить "background-color: transparent",

HTML (стандартная кнопка "отправить" ) - ничего особенного (мне не нравится смешивать код со стилем):

<input type="submit" name="submit" id="mystyle" value="send e-mail"/>

то в css (то же, что и обычная ссылка, за исключением граней уничтожения и фона по умолчанию)

#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Без CSS, как официальная кнопка отправки, с CSS, что бы вы ни разработали.

Протестировано: Chrome, IE, Opera

Ответ 7

У меня была такая же проблема с кнопками ввода. На этот раз IE8 появлялся, как будто я хотел "из коробки", и Chrome разочаровался!

CSS, который помогло, был:

input[type="button"] {
    border: 0;
    border-width: 2px;
    border-color: white;
    border-style: solid;
}

border: 0; удаляет 3D-скос (стиль границы), затем я заменяю его на плоскость, которая отлично рисуется как в IE8, так и в Chrome.

Ответ 8

В таблицу стилей вы можете сделать что-то вроде следующего (или в теге <style>...</style> на странице) и использовать несколько продвинутых селекторов CSS:

input[type=submit], input[type=button], /* Advanced CSS selectors */
input.button /* For older browsers you can add a 'button' class to each button where you want a bkg img */
{
  border: 0;
  background-image: url("/images/foo.png");
}

Ответ 9

Обратите внимание, что Safari очень упрям ​​с кнопками отправки стилей.

<button type="submit"></button>

Более гибкий. Однако, если вы используете несколько кнопок в форме, IE6 имеет проблемы. IE также отправляет элемент innerHTML элемента кнопки, в то время как Firefox передает атрибут value (что имеет для меня больше смысла).

Ответ 10

Я думаю, вы можете указать, как выглядят кнопки и кнопки отправки:

input[type=button], input[type=submit] { border: 0 }

Ответ 11

Я искал ответ, увидел это и решил взвесить после того, как выяснил, что исправить. Все ответы ниже верны и полезны вплоть до того, что маленькая серая рамка все еще видна.

Никто не упомянул: background-size: cover;

Который убрал последний бит серого с кнопки.