Возможный дубликат:
Нарисуйте круг, используя только CSS
Я хотел бы знать, есть ли способ изменить форму кнопки отправки с прямоугольника на круглую?
Я не хочу использовать изображение круглой формы. Мне нужны все остальные характеристики кнопки из стиля CSS.
На ваш вопрос уже дан ответ, но я рекомендую вам Twitter Bootstrap.
Это структура HTML / CSS, которая позволяет создавать отличные кнопки ( среди прочего) легко.
Эти кнопки являются «кроссбраузерными», что означает, что они совместимы с Internet Explorer.
Только с одним классом - btn - вы можете стилизовать <button>, <input type="button"> или <a>.
Этот :
<button class="btn"></button>
Дает то, что:
Вы также можете быстро настроить кнопку с помощью необязательного класса:
btn-primary, btn-info, btn-success, btn-warning, btn-danger и btn-inverse.
Эти классы преобразуют вашу кнопку следующим образом:
Затем вы можете выбрать размер с классами btn-large, btn-small и btn-mini.
Наконец, вы можете добавить значок (список здесь) в ваша кнопка.
Этот:
<button class="btn btn-success">
<i class="icon-shopping-cart icon-white"></i>
<span>Checkout</span>
</button>
Дает то, что:
Получайте удовольствие от ваших новых кнопок. :)
border-radius: 5px в border-radius: 10px, если вам это нужно. :)
- person GG.; 26.07.2012
Используйте свойство border-radius.
Пример:
.button {
width: 100px;
height: 100px;
background-color: #000;
border: solid 1px #000;
border-radius: 50%
}
В приведенном выше примере вы получите правильный круг.
Если вам нужна небольшая закругленная форма, попробуйте следующее:
.button {
width: 100px;
height: 30px;
background-color: #000;
border: solid 1px #000;
border-radius: 5px
}
Живая демонстрация: Обычный круг
Живая демонстрация: Закругленная форма
Живая демонстрация: Кнопка ввода с текстом
div на input. Пример: tinkerbin.com/S8BAZK3Q
- person Nikola K.; 26.07.2012
Используйте радиус границы CSS. Я бы порекомендовал поискать в Google «генератор кнопок CSS» или что-то подобное и найти любое количество инструментов для создания кнопок, с которыми вы можете поиграть, чтобы получить правильный CSS. Вам просто нужно убедиться, что высота элемента = ширина, а затем соответствующим образом отрегулировать угловые радиусы.
Используйте этот стиль:
input[type='submit'] {
width:100px;
height:100px;
border-radius:50px;
}
Вы можете использовать border-radius в своем CSS, но он не будет поддерживаться в IE.
Поиграйте с: -
border-radius: 10px 10px 10px 10px
Я бы предложил либо использовать пользовательский интерфейс Jquery (вы можете создать свою собственную тему) http://jqueryui.com/themeroller/ < / а>
or
CSS3 http://webdesignerwall.com/tutorials/css3-gradient-buttons
CSS3 не будет работать в IE.
