Css кнопки, как сохранить округлость кнопки при смене цвета?

Vitaliytim · 26.06.2007, 07:56

CSS кнопки, как сохранить округлость кнопки при смене цвета?
Возьмем изначальный код
<html>
<body>
<script>
function go(url){
var frm = document.getElementById('navfrm');
frm.action = url;
frm.submit();

}
</script>
<form id="navfrm">
<input type=submit value="Яндекс" onclick="go('http://yandex.ru')" style="width:100px">

<input type=submit value="Рамблер" onclick="go('http://rambler.ru')" style="width:100px">

<input type=submit value="Mail.ru" onclick="go('http://mail.ru')" style="width:100px">

</form>
</body>
</html>
Кнопки красивые края кнопок закруглены, но стоит только поменять цвет кнопок
<input type=submit value="Main
Главная" onclick="go('http://gimnastyka.narod.ru')"style="width:70px; background-color:#cccc99">
Как они становятся прямоугольные, как можно поменять цвет и не потерять округлость?
Еще вопрос на примере этого кода как поменять чтоб кнопка мигала при нажатии разными цветами?
Как вставить картинку, но не как
<input type=submit value="Main
Главная" onclick="go('http://gimnastyka.narod.ru')"style="width:70px; background-color:#cccc99; background-repeat:no-repeat; background-position:right; background-image:URL(newani2.gif)">
в этом коде фоновая, а добавить картинку к тексту?
input type=submit или input type= border или другие варианты что значат и на что влияют?
С точки зрения оптимизации CSS кнопок на моем сайте http://gimnastyka.narod.ru что посоветуете?

Duban · 26.06.2007, 12:18

Цитата:

http://gimnastyka.narod.ru

Ужос (ИМХО)
зачем нужны все эти инпуты если никаких параметров они не передают?

не смотря на разное рекомендую для начала прочитать это http://web-silver.ru/forum/showthrea...threadid=10063

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

Vitaliytim · 26.06.2007, 15:46

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

John_webMaker · 26.06.2007, 16:07

Vitaliytim, http://web-silver.ru/forum/showthre...&threadid=10063 здесь и рассказывается как сделать кнопки без инпутов с помощью CSS.

Vitaliytim · 27.06.2007, 00:48

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

kost · 27.06.2007, 01:51

Уберите кнопки, и сделайте нормальные ссылки вида ссылка.

Вместо текста ссылки можете вставить рисунок.

kost добавил [date]1182894782[/date]:
Кнопки округлые -- это у вас, в вашей настройке OC/браузера.

У людей с классическим оформлением Windows кнопки будут прямоугольные, без закруглений.

Vitaliytim · 27.06.2007, 14:41

Почему убрать я как раз хочу кнопки но округлые и не белые
Они у меня сейчас прямоугольные потому что поменял цвет с белого, вот и спрашиваю как при перемене цвета сохранить округлость?
В место текста ссылки вставить рисунок мне не подходит мне нужно то и другое, в начале текст потом рисунок, ведь это возможно? И подчеркиваю фоновую как ставить знаю (выше привел пример) но мне нужно в тексте.
А на счет настроек браузера, он тут не причем, ведь в нем не настроено белые кнопки показывать округлыми, а цветные прямоугольными (подтверждение тому при корректировании через народ там кнопка сохранить оранжевая и округлая, но код от туда взять нельзя ведь это программа, а не сайт, но это подтверждение ведь я к той кнопке получаю доступ через тот же браузер).
Надеюсь, что не грубо отвечаю, просто прошу больше не писать ответы «а нафига тебе кнопки» если кто знает как помочь пишите конкретно и подробно.

John_webMaker · 27.06.2007, 15:16

Vitaliytim, Убрать, потомучто никто кнопки инпутом не делает. Используется, если это меню, только тэг <a> в списке <ul>. А в CSS стиле тэгу <a> присваевается display:block и отступы padding. После чего все тэги <a> списка <ul> будут выглядеть как кнопки.

Vitaliytim · 27.06.2007, 15:21

Можно в виде примера
<html>
<body>
<script>
function go(url){
var frm = document.getElementById('navfrm');
frm.action = url;
frm.submit();

}
</script>
<form id="navfrm">
<input type=submit value="Яндекс" onclick="go('http://yandex.ru')" style="width:100px">

<input type=submit value="Рамблер" onclick="go('http://rambler.ru')" style="width:100px">

<input type=submit value="Mail.ru" onclick="go('http://mail.ru')" style="width:100px">

</form>
</body>
</html>
Переделайте этот код, а кнопки будут цветными и округлыми? Почему инпут плох он тормознее? Тогда для чего он?
Заранее спасибо

Leek · 27.06.2007, 15:34

А перед кем Вы вообще выпендриться решили с этими кнопками? По-Вашему, это удобно, красиво, модно или что?
Во-первых, не путайте инпуты и линки. Во-вторых, не пишите на двух языках.
В-третьих, как выглядят Ваши «округлые» кнопки в Вашем браузере, известно только Вам. Заодно у Вас двуязычные подписи сверстаны криво. Скриншот прилагается.
А на вопрос «для чего input» прекрасно отвечают спецификации HTML. Поэтому задавать Вы его должны сами себе.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как сохранить яркие цвета в CMYK	konstaner	Растровая графика	2	16.02.2012 01:36
Кнопки в css	messi10	HTML, CSS, JavaScript	2	28.07.2011 13:01
Кнопки	КОШКА	Библиотека	24	01.02.2008 13:08
Кнопки	kat	Технологии Flash	2	01.10.2004 13:16
Кнопки	Stitch	HTML, CSS, JavaScript	9	30.01.2004 12:06

26.06.2007, 07:56	#1
Vitaliytim	CSS кнопки, как сохранить округлость кнопки при смене цвета? Возьмем изначальный код <html> <body> <script> function go(url){ var frm = document.getElementById('navfrm'); frm.action = url; frm.submit(); } </script> <form id="navfrm"> <input type=submit value="Яндекс" onclick="go('http://yandex.ru')" style="width:100px"> <input type=submit value="Рамблер" onclick="go('http://rambler.ru')" style="width:100px"> <input type=submit value="Mail.ru" onclick="go('http://mail.ru')" style="width:100px"> </form> </body> </html> Кнопки красивые края кнопок закруглены, но стоит только поменять цвет кнопок <input type=submit value="Main Главная" onclick="go('http://gimnastyka.narod.ru')"style="width:70px; background-color:#cccc99"> Как они становятся прямоугольные, как можно поменять цвет и не потерять округлость? Еще вопрос на примере этого кода как поменять чтоб кнопка мигала при нажатии разными цветами? Как вставить картинку, но не как <input type=submit value="Main Главная" onclick="go('http://gimnastyka.narod.ru')"style="width:70px; background-color:#cccc99; background-repeat:no-repeat; background-position:right; background-image:URL(newani2.gif)"> в этом коде фоновая, а добавить картинку к тексту? input type=submit или input type= border или другие варианты что значат и на что влияют? С точки зрения оптимизации CSS кнопок на моем сайте http://gimnastyka.narod.ru что посоветуете?

26.06.2007, 15:46	#3
Vitaliytim	Там в той теме про сглаживание углов кнопки даже не заикаются, а это главный вопрос и на счет картинки в тексте тем более, а про мигание кнопки дают мало инфы, один уже имеет шаблон а другой дает ему легкую корректировку, в общем этот их разговор не дает ни какой помощи. Языков у меня на сайте реально один, английский так бросил через переводчик, а украинский просто в шапке. А как без инпутов?

26.06.2007, 16:07	#4
John_webMaker	Vitaliytim, http://web-silver.ru/forum/showthre...&threadid=10063 здесь и рассказывается как сделать кнопки без инпутов с помощью CSS.

27.06.2007, 00:48	#5
Vitaliytim	Да рассказывается, но очень не подробно (вот я вверху привел пример более или менее полного шаблона). Но без инпутов они уже не выглядят как кнопки по крайней мере на сайте паровозиков или это у него не от этого? Мне нужно что бы выглядели кнопки как у меня но с сглаживанием краев (как до перемены цвета с белого) ну и картинки в тексте не фоновые

27.06.2007, 01:51	#6
kost	Уберите кнопки, и сделайте нормальные ссылки вида ссылка. Вместо текста ссылки можете вставить рисунок. kost добавил [date]1182894782[/date]: Кнопки округлые -- это у вас, в вашей настройке OC/браузера. У людей с классическим оформлением Windows кнопки будут прямоугольные, без закруглений.

27.06.2007, 14:41	#7
Vitaliytim	Почему убрать я как раз хочу кнопки но округлые и не белые Они у меня сейчас прямоугольные потому что поменял цвет с белого, вот и спрашиваю как при перемене цвета сохранить округлость? В место текста ссылки вставить рисунок мне не подходит мне нужно то и другое, в начале текст потом рисунок, ведь это возможно? И подчеркиваю фоновую как ставить знаю (выше привел пример) но мне нужно в тексте. А на счет настроек браузера, он тут не причем, ведь в нем не настроено белые кнопки показывать округлыми, а цветные прямоугольными (подтверждение тому при корректировании через народ там кнопка сохранить оранжевая и округлая, но код от туда взять нельзя ведь это программа, а не сайт, но это подтверждение ведь я к той кнопке получаю доступ через тот же браузер). Надеюсь, что не грубо отвечаю, просто прошу больше не писать ответы «а нафига тебе кнопки» если кто знает как помочь пишите конкретно и подробно.

27.06.2007, 15:16	#8
John_webMaker	Vitaliytim, Убрать, потомучто никто кнопки инпутом не делает. Используется, если это меню, только тэг <a> в списке <ul>. А в CSS стиле тэгу <a> присваевается display:block и отступы padding. После чего все тэги <a> списка <ul> будут выглядеть как кнопки.

27.06.2007, 15:21	#9
Vitaliytim	Можно в виде примера <html> <body> <script> function go(url){ var frm = document.getElementById('navfrm'); frm.action = url; frm.submit(); } </script> <form id="navfrm"> <input type=submit value="Яндекс" onclick="go('http://yandex.ru')" style="width:100px"> <input type=submit value="Рамблер" onclick="go('http://rambler.ru')" style="width:100px"> <input type=submit value="Mail.ru" onclick="go('http://mail.ru')" style="width:100px"> </form> </body> </html> Переделайте этот код, а кнопки будут цветными и округлыми? Почему инпут плох он тормознее? Тогда для чего он? Заранее спасибо

27.06.2007, 15:34	#10
Leek	А перед кем Вы вообще выпендриться решили с этими кнопками? По-Вашему, это удобно, красиво, модно или что? Во-первых, не путайте инпуты и линки. Во-вторых, не пишите на двух языках. В-третьих, как выглядят Ваши «округлые» кнопки в Вашем браузере, известно только Вам. Заодно у Вас двуязычные подписи сверстаны криво. Скриншот прилагается. А на вопрос «для чего input» прекрасно отвечают спецификации HTML. Поэтому задавать Вы его должны сами себе.