Метод визуализации закругленных углов на кнопках отправки формы - PullRequest
Новая
       10

Метод визуализации закругленных углов на кнопках отправки формы

1 голос
/ 23 апреля 2009

Я ищу чистый метод округления углов всех входов с помощью класса «submit». Я экспериментировал с несколькими методами javascript, но ни один не работал хорошо для элементов формы. Чистый CSS был бы великолепен, но, обратите внимание, кнопка должна быть расширена и будет иметь произвольный текст. Другие методы требовали по-настоящему уродливой HTML-разметки вокруг входных данных, чего я не хочу.

Есть идеи?

Ответы [ 4 ]

9 голосов
/ 30 июля 2009

Попробуйте CurvyCorners (30 100 байт, сокращено) для этого решения, поскольку браузер IE не сделает его округленным. Я не пытался добавить изображение. 

<style type="text/css">
.input-rounded-button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    padding:0 3px 0 3px;
    display:inline-block;
    text-decoration:none;
    background:#595651;

    color:#FFFFFF;
    cursor:pointer;
    font:11px sans-serif;
}

.input-rounded-button:hover { 
    text-decoration:none; 
    color:#ADD8E6; 
    cursor:pointer;
    border:1px solid #FF2B06;
}
</style>

<input class="input-rounded-button" type="button" value="SEARCH" />
2 голосов
/ 23 апреля 2009

Я давно пользуюсь этим методом -

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Хорошо работает

1 голос
/ 21 апреля 2012

Если вы можете использовать CSS3, самый простой способ, который я знаю, это просто сделать это: 

.button
{
  background-color:#f57070;
  border-radius: 10px;    //-rounding the edges, only available in CSS3-//
  font-family:arial;
  font-size:30px;
  text-decoration:none;
}

с HTML-кодом: 

<a href=# class='button'>...</a>

делает красивую красную кнопку с закругленными краями.

1 голос
/ 30 июля 2009

Может быть, это тот обходной путь, который вы ищете. Хотя он не поддерживает вертикальное масштабирование. (Почему, черт возьми, у вас есть кнопки многострочной отправки?)

http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

Он специализирован для кнопок отправки и поддерживает довольно разумный диапазон браузеров.

...