Как уменьшить размер кнопки в css
Перейти к содержимому

Как уменьшить размер кнопки в css

  • автор:

Курсы javascript

подскажите пожалуйста, как сделать, что бы «кнопка» меняла свой размер, допустим увеличивалась при ее нажатии.

09.01.2011, 19:56
Регистрация: 04.04.2008
Сообщений: 6,245

повесить обработчик события на соответствующее событие кнопки
в нем менять ответственные за размер CSS(хотя для размера, можно и только свойства-атрибуты поменять) у необходимой нам кнопки

09.01.2011, 19:56
Регистрация: 25.05.2010
Сообщений: 511
Последний раз редактировалось Vulkan, 09.01.2011 в 19:59 .
09.01.2011, 20:02
Новичок на форуме
Регистрация: 09.01.2011
Сообщений: 3
спасибо)) только вот у меня еще задача, что бы она при повторном нажатии уменьшалась обратно))
09.01.2011, 20:07
Регистрация: 04.04.2008
Сообщений: 6,245

Значит вам надо запомнить где-то, изначальные размеры кнопки, и флаг ее состояния.
например в глобальной переменной.
а затем в функции-обработчике события, в зависимости от флага состояния выставлять одно из значений размера
PS это наиболее простой вариант для полного новичка.
он работает, хотя и не является best practice

CSS для начинающих. CSS кнопки это просто

Для начала нам необходимо нарисовать кнопку, вроде этой:

CSS Button Preview

Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:

Button in Photoshop - Step 0

Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (“Fill Opacity” => 0%)):

Button in Photoshop - Step 1

Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.

Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:

Button in Photoshop - Step 2

Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):

Button in Photoshop - Step 4

Button in Photoshop - Step 3

Результат с залитой границей:

CSS Button Photoshop Result

Если мы сделаем цветной фон:

CSS Button Photoshop Result

CSS Button Photoshop Result

CSS Button Photoshop Result

Ну вот – кнопочка и готова, приступим к следующему шагу…

Простая CSS кнопка

Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):

CSS Buttons Sprite

Теперь нам остается лишь слегка подправить CSS для таких кнопок:

.button < cursor:pointer; display:block; height:70px; width:320px; line-height:70px; text-align:center; background-image:url('images/buttons.png'); background-repeat:no-repeat; >.button.green < background-position:0 0 >/* зеленая кнопка */ .button.green:hover < background-position:0 -350px >/* активная зеленая кнопка */ /* и т.д. */

Сам HTML код элементарен:

&lt;a href=&quot;#&quot; title=&quot;Label&quot; green&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; white&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; black&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; orange&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; red&quot;&gt;Label&lt;/a&gt;

CSS Button Sprite Result

Резиновая CSS кнопка

Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.

Строим DOM

HTML Button

Ну и сам HTML код:

&lt;ul &lt;li href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li green&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li white&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li black&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li orange&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li red&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;

Примечание: можно использовать практически любые другие HTML теги, это дело вкуса, так что таким же образом вы можете изменить и элементы формы. Для упрощения HTML’а можно воспользоваться JavaScript’ом. Приведу пример:

&lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function()< $('form :button, form :submit').each(function()< var className = $(this).attr('class'); $(this).wrap('&lt;div '+className+'&quot;&gt;&lt;/div&gt;'); $(this).after('&lt;em&gt;&lt;/em&gt;'); >); >); &lt;/script&gt; &lt;form onsubmit=&quot;return false;&quot;&gt; &lt;input type=&quot;button&quot; title=&quot;Button&quot; value=&quot;Button&quot;/&gt; &lt;input type=&quot;submit&quot; title=&quot;Submit&quot; value=&quot;Submit&quot;/&gt; &lt;/form&gt;
Пишем CSS

Читаем комментарии по коду:

.button < /* у нас кнопка с закруглением - значит нам необходимо у DOM элемента так же скруглить углы */ border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius: 10px; /* внутренний элемент &lt;a&gt; должен быть смещен относительно &lt;li&gt; на 20px - освобождаем место для &lt;em&gt; */ padding-right:20px; /* данные элемент будет relative - т.е. все элементы внутри него с абсолютным позиционированием будут плясать от него */ position:relative; >.button a, .button em < /* ссылке и элементу em задаем одинаковое фоновое изображение */ background-image:url('css/images/button.png'); background-repeat:no-repeat; >.button a < /* ссылку делаем блочным элементом задаем высоту элемента, а так же свойство line-height - с его помощью мы выравниваем текст по вертикали */ display:block; height:52px; line-height:52px; outline:none; color:#333; font-size:18px; text-indent:20px; text-decoration:none; text-align:center; text-shadow: #333 0px -1px 0px; >.button em < /* внутренний элемент так же будет блочным с размером 52х20, с абсолютной позиционированием */ display:block; position:absolute; background-position:100% 0; width:20px; height:52px; top:0px; right:0px; >/* цвет шрифта для некоторых кнопок лучше поменять */ .button.green a, .button.black a, .button.red a < color:#fff; >/* тут указываем цвет наших кнопок */ .button.green < background-color:#009e0f >.button.green:hover < background-color:#068612 >.button.white < background-color:#f0f0f0 >.button.white:hover < background-color:#c0c0c0 >.button.black < background-color:#000 >.button.black:hover < background-color:#333 >.button.orange < background-color:#ff7800 >.button.orange:hover < background-color:#c60 >.button.red < background-color:#f00 >.button.red:hover

Наблюдаем результат

Сравним результат наших трудов в разных браузерах:

CSS Button Compare Result

Как вы можете заметить, есть несколько проблем с данной реализацией:

  • полупрозрачность в IE6 не работает – можем докрутит хаки, но зачем – IE6 можно считать умершим
  • box-radius в IE и Opera не работает – либо отказываемся от данной фичи, либо зарисовываем свободное пространство фоновым цветом (для IE так же есть грязный хак, см.: Curved corner (border-radius) cross browser)

Кнопочки можно пощупать на демо, все сорцы доступны по следующей ссылке:

Еще ссылки по теме:

  • Scalable CSS Buttons Using PNG and Background
  • Bold CSS Buttons
  • Make fancy buttons using CSS sliding doors technique
  • CSS Sliding Door using only 1 image
  • CSS Oval buttons

Posted on 2009-07-27 2021-05-07 Categories HTML and CSS Tags Education

18 thoughts on “CSS для начинающих. CSS кнопки это просто”

COTOHA says:

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

Drunk says:

Идея с начинанием распространения основ CSS – отличная. Есть замечание по поводу кнопочек – Fx (FireFox) при клике любит обводить ссылочку уродской дот-овой рамочкой, особенно уродско это выглядит, когда ссылка по размеру меньше картинки кнопки (у тебя так в элементах формы). Лечится добавлением ссылке css-свойств :

outline: none; -moz-outline-style: none;

Shelley says:
Where can I find help with getting Venn circles to overlap?
ambientos says:

Идея с начинанием распространения основ CSS – отличная. Есть замечание по поводу кнопочек – Fx (FireFox) при клике любит обводить ссылочку уродской дот-овой рамочкой, особенно уродско это выглядит, когда ссылка по размеру меньше картинки кнопки

Вообще-то это очень полезная фича для ссылок и прочих навигационных элементов, позволяющая не забыть, какой из элементов активен. Так что не советую ее повсеместно отключать.

Александр says:
Кнопочки должны подсвечиваться а не темнеть.Подсвечиваться а не темнеть!
Vamerah says:

Хороший урок, увидел я его на другом сайте. Благодаря ему, понял как создавать кнопки и растягивать ссылку на весь блок. Нашел очень интересный момент, что можно все кнопки в одну картинку сохранить. Правда урок немного устарел, код можно немного оптимизировать, но для новичков в самый раз.
А теперь вопрос, резиновые кнопки действительно резиновые, а то они что-то не растягиваются при увеличение в них текста?

vvs says:

Урок, конечно, хороший. Конкретные практические примеры, всё наглядно. Но использовать фотошоп лишь для рисования кнопок – это слишком! 🙁 Кстати, для рисования тут бы больше подошёл кекторный редактор. Например, тот же inkscape – он и бесплатный, и такая задача решается на раз-два в меньшее число шагов.

Alex says:

Спасибо вам за ваш труд и прекрасные уроки.
Чтобы мы, “чайники”, делали бы без вас, тех, кто нам помогает советами и примерами?

axel says:
Вот еще нашел один урок по созданию красивых кнопок
http://protime.je1.ru/?p=33
Axel says:

ну а вообще правильней закругленные углы делать не картинками, а с помощью CSS3 но они не будут работать во многих браузерах, нодля этого есть следующее решение
http://prootime.ru/css-zakruglennie-ugli.html

VS says:

Спасибо большое за урок! вижу тут собрались как-раз люди прошаренные 🙂 поэтому я, как чайник, задам извечный вопрос: как отцентрировать текст на кнопке не только по ширине, но и по высоте?

Размер кнопок «minimize,maximize,close» в breeze-gtk

Доброго времени суток. Мотороллер не мой. Товарищ утверждает, что очень уж вырвиглазно смотрится, и жить спокойно с этим нельзя. Суть такова.
Если в настройках плазмы в «Оформление приложений — Оформление окон — Breeze — Configure Breeze» на вкладке Основное выбрать Кнопки «маленькие», то во всех родных для плазмы окошках кнопки таки становятся меньше. Однако, если затем пойти в Firefox — Персонализация и убрать там Заголовок, то в схлопнувшемся окне кнопки закрытия\свёртывания не изменят размер. Если заголовок не убирать, то всё ок, кнопки мельчают.
Несложно догадаться, что, похоже, дело в теме GTK, ведь когда кнопки рисуются на kwin’овой панели, всё нормально. Используется изкоробочная breeze-gtk. Вот только способа изменить размер этих кнопок, которые в gtk-decoration-layout называются minimize,maximize,close, найти не удалось.
Прилагаю скрины:
Здесь расхождение в padding/margin даже без доп. настроек
Здесь видно разный размер кнопок
Может, кто-то знает, как это дело настроить?

Nirvandil ★
17.09.18 18:57:33 MSK

Изменение размера

Используйте resize , чтобы изменить размер элемента по горизонтали и вертикали.

Перетащите дескриптор текстовой области в демоверсии, чтобы увидеть ожидаемое поведение

textarea class="resize rounded-md">textarea>

Используйте resize-y , чтобы изменить размер элемента по вертикали.

Перетащите дескриптор текстовой области в демоверсии, чтобы увидеть ожидаемое поведение

textarea class="resize-y rounded-md">textarea>

Используйте resize-x , чтобы изменить размер элемента по горизонтали.

Перетащите дескриптор текстовой области в демоверсии, чтобы увидеть ожидаемое поведение

textarea class="resize-x rounded-md">textarea>

Используйте resize-none , чтобы предотвратить изменение размера элемента.

Обратите внимание, что дескриптор текстовой области исчез

textarea class="resize-none rounded-md">textarea>

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

div class="resize-none hover:resize"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: resize , чтобы применить утилиту resize только на экранах среднего размера и выше.

div class="resize-none md:resize"> div> 

Copyright © 2023 Tailwind Labs Inc.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *