HTML - стиль кнопки формы

Question

Я пытаюсь создать мою кнопку отправки для своей формы. Я искал тег «button» и добавлял в свой стиль CSS, но кнопка по-прежнему имеет ужасный стиль по умолчанию.

Это то, что я до сих пор:

<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button"> 
Increase 
</button> 

Мой стиль CSS работает, но я также получить неприятный глядя границы и цвет фона. Я тоже искал JavaScript, но мне не нравится мысль о том, что не все браузеры JS активны.

Ниже изображение кнопки, верхняя является то, что он выглядит, нижняя является то, что его предположить, чтобы выглядеть следующим образом:

Вот мой CSS:

#visit_return_button{ 
    width:90px; 
    height:30px; 
    position:absolute; 
    background-image: url(image/build_button.png); 
    background-repeat: no-repeat; 
    /*font-family: Tahoma, Geneva, sans-serif;*/ 
    font-size: 14px; 
    font-weight: normal; 
    color: #FFF; 
    text-align: center; 
    /*margin: auto;*/ 
    padding-top: 10px; 
    margin-top:-20px; 
} 

Поблагодарили бы за любую помощь, спасибо

Answer 1

Вы можете легко сделать свою кнопку с помощью CSS3 Border-Radius собственности: -

CSS

#visit_return_button{ 
    background-color:#9C8C42; 
    border: 2px solid #91782c; 
    color: #FFF; 
    text-align: center; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    padding: 10px; 
    } 

HTML

<button id="visit_return_button" type="submit">Increase</button> 

демо: - http://jsfiddle.net/VY8xs/3/

Answer 2

Библиотеки часто являются хорошим решением для стилизации кнопок последовательно на нескольких типах браузеров. Отъезд jQuery buttons, YUI Buttons, и есть много others.

Answer 3

Либо пытаются скрыть border как border:0; и настроить фон, чтобы соответствовать вашим потребностям или не использовать фоновое изображение и попытаться сделать его чистым CSS и border-radius который, кажется, лучше. См. http://jsfiddle.net/qVkRs/1/

Answer 4

Сначала вы хотите создать глобальный стиль для своих кнопок, иначе вам придется применять эти стили к каждому идентификатору кнопки, который будет много повторять css. Затем измените свои стили фона так, как показано ниже. После этого вы можете настроить остальные, чтобы выглядеть правильно.

input[type="button"], input[type="submit"], button 
{ 
    background: none; 
    background-image: url(image/build_button.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: 0px; 
    /* add the rest of your attributes here */ 
} 

Это применит эти стили ко всем кнопкам по всему сайту. Если вам нужно применить дополнительные стили к определенной кнопке или переопределить некоторые из приведенных выше, используйте идентификатор и поместите его ниже указанного выше кода. Также избавиться от атрибута class = "" на теге кнопки, вам это не нужно и оно не используется, насколько мы можем видеть. Надеюсь это поможет. Удачи!

Answer 5

Я думаю, вы пытаетесь удалить границу. Это может быть сделано с:

border:none; 

Я взял на себя смелость прибирать оригинальный CSS здесь:

#visit_return_button{ 
    width:90px; 
    height:30px; 
    font:14px Tahoma, Geneva, sans-serif; 
    background:url(image/build_button.png) no-repeat; 
    color:#fff; 
    text-align:center; 
    border:none; /* removal of border */ 
} 

Кроме того, если это форма, то лучше использовать:

<input type="button" value="Increase"/> 

для кнопок; и:

<input type="submit" value="Increase"/> 

специально для кнопок SUBMIT.

Answer 6

Просто скрыть границы кнопки и установить цвет фона

background:#ffffff url('your_image.png'); 

Answer 7

Вот мое решение; Я тестировал все основные браузеры, и он отлично работает, даже без фонового изображения. Кроме того, IE8 не выполняет округлые углы.

http://jsfiddle.net/uSphG/3/

Я добавил некоторые свойства стиля, на всякий случай. Некоторые функции имеют разные значения по умолчанию для разных браузеров.

button::-moz-focus-inner { 
padding: 0 !important; 
border: none !important; 
} 

#visit_return_button{ 
display:inline-block; 
width:90px; 
padding:0; margin:0; outline:0; 
background:#9B8C47; 
background-image: url(image/build_button.png); 
background-repeat: no-repeat; 
/*font-family: Tahoma, Geneva, sans-serif;*/ 
border:1px solid #866517; 
-moz-border-radius:0.4em; 
border-radius:0.4em; 
font-size: 14px; line-height:24px; 
font-weight: normal; 
color: #FFF; 
text-align: center; 
/*margin: auto;*/ 
}