как изменить форму кнопки отправки на кружок [дубликат]

StackOverflow https://stackoverflow.com//questions/11671429

Вопрос

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

Я хотел бы знать, есть ли способ изменить форму кнопки отправки с прямоугольной на круглую??

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

Это было полезно?

Решение

На ваш вопрос уже дан ответ, но я рекомендую вам Твиттер-бутстрап.

Это среда HTML/CSS, которая позволяет вам создавать отличные кнопки (среди прочего) легко.

Эти кнопки являются «кроссбраузерными», что означает, что они совместимы с Internet Explorer.

Только с одним классом - btn - вы можете стилизовать <button>, <input type="button"> или <a>.

Этот :

<button class="btn"></button>

Дает это:

enter image description here

Вы также можете быстро настроить кнопку с помощью дополнительного класса:

btn-primary, btn-info, btn-success, btn-warning, btn-danger и btn-inverse.

Эти классы преобразуют вашу кнопку следующим образом:

enter image description here

Затем вы можете выбрать размер с классами btn-large, btn-small и btn-mini.

Наконец, вы можете добавить значок (список здесь) в вашей кнопке.

Этот:

<button class="btn btn-success">
    <i class="icon-shopping-cart icon-white"></i>
    <span>Checkout</span>
</button>

Дает это:

enter image description here

Получайте удовольствие от новых кнопок. :)

Другие советы

Использование 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
}
.

Живая демонстрация: Регулярный круг Живая демонстрация: Округнутая форма


Live Demo: Кнопка ввода с текстом

Используйте радиус границы CSS.Я бы порекомендовал Googlet 'CSS-генератор кнопки «или такой и нахождение любого количества кнопок, генерирующих инструменты, которые вы можете воспроизводиться, чтобы получить правила CSS.Вам просто нужно было бы убедиться, что высота элемента= ширина, а затем регулировка угловых радиусов соответственно.

Используйте этот стиль: 

input[type='submit'] {
    width:100px;
    height:100px;
    border-radius:50px;
}​
.

Вы можете использовать границу-радиус в ваших CSS, но он не будет поддерживаться в IE.

Играть с: - 

border-radius: 10px 10px 10px 10px
.

Я бы предложил либо использовать UI jQuery ui (вы можете сделать вам собственную тему) http://jqueryui.com/themeroller/

или

CSS3 http://webdesignerwall.com/tutorials/css3-gradient-buttons

CSS3 не будет работать в IE.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top