Css style button: 92 Beautiful CSS buttons examples

Содержание

Стилизация кнопок в виде ссылок

Распространенная ошибка, которую совершают многие разработчики, заключается в использовании ссылки для запуска действия на сервере, например, удаления элемента из корзины покупок или добавления чего-либо в избранное. Оба этих примера представляют собой действия, которые изменяют состояние сервера, и поэтому их следует выполнять с использованием « post ».

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

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

На самом деле несложно сделать кнопку отправки похожей на ссылку с помощью CSS, поэтому вам никогда не придется жертвовать формами ради ссылок исключительно ради дизайна.

Во-первых, разметка: хотя вы можете использовать input type="submit" в качестве элемента отправки, и этот пример будет работать точно так же, элемент кнопки, на мой взгляд, гораздо лучший вариант. Он действительно гибкий и может иметь множество различных элементов, вложенных внутрь, если вы того пожелаете, от простого текста с изображением до заголовков и абзацев. Эта статья о кнопках, написанная Аароном Густафсоном еще в 2006 году, все еще довольно актуальна сегодня и объясняет некоторые способы использования скромного элемента кнопки.

Еще одна полезная статья, также опубликованная некоторое время назад, объясняет приемы, которые Wufoo использует для стилизации ссылок, чтобы они выглядели как кнопки. Действительно важная вещь, которую следует вынести из этой статьи, заключается в том, что добавление

overflow: visible на кнопку устраняет сумасшедшую проблему с шириной, которую IE любит делать с нами.

Я разместил простую демонстрацию, чтобы вы могли следить за ней в своем браузере. Для целей этого примера разметка будет следующей:

Базовая страница в этой демонстрации имеет следующие стили, примененные к ссылкам и основной части:

 body {
семейство шрифтов: "Verdana" без засечек;
}
ссылка,
а: посетил {
цвет синий;
}
а: наведите,
фокус,
а: активный {
черный цвет;
}

Затем я добавляю волшебное заклинание, чтобы увеличить ширину в IE для всех кнопок:

 button {
переполнение: видимое;
ширина: авто;
}

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

Курсором по умолчанию для кнопок является обычная стрелка. Обычно я устанавливаю курсор : указатель для всех элементов кнопки, чтобы пользователь знал, что они кликабельны. Это имеет еще большее значение для кнопок, которые притворяются ссылками.

 кнопка.ссылка {
семейство шрифтов: "Verdana" без засечек;
размер шрифта: 1em;
выравнивание текста: по левому краю;
цвет синий;
фон: нет;
маржа: 0;
заполнение: 0;
граница: нет;
курсор: указатель;
}

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

-moz-user-select: текст;

Вы также можете переопределить все остальные стили кнопок, если таковые имеются.

Теперь у вас почти есть ссылка. Те из вас, кто обращал пристальное внимание ранее, заметят пока еще необъяснимый внутренний промежуток в нашей кнопке. Это связано с тем, что не представляется возможным напрямую установить text-decoration для кнопки, и в зависимости от того, как у вас установлены стили ссылок, это то, что вы, вероятно, захотите сделать.

Правило text-decoration: underline фактически применяется к диапазону при наведении или фокусе кнопки. Этот способ более гибкий, если в какой-то момент вы решите добавить или удалить подчеркивание при наведении.

button.link диапазон {
оформление текста: подчеркивание;
}
button.link: диапазон наведения,
button.link:диапазон фокуса {
черный цвет;
}

Естественно, любимый браузер всех, Internet Explorer 6 не будет отображать эффект наведения на вашу ссылку, потому что он не «делает» наведение на произвольные элементы, а только на фактические ссылки. Вы можете имитировать этот эффект с помощью Javascript, если хотите, добавляя класс при наведении и удаляя его при mousout. Другие ограничения этого метода заключаются в том, что выделение текста выглядит немного хитроумным во всех версиях IE.

Мой пример выше очень прост. Если вы ищете кнопку, которая отображается в потоке с текстом в виде ссылки, например, ссылку удаления в элементе корзины покупок в этом примере, вам также необходимо применить « display:inline » как к форме, так и к любому уровню блока. элементы внутри.

Итак, теперь никаких оправданий — идите вперед и используйте правильный метод HTTP!

Теги
css
html
кнопка
http
пост
техника
инструкции

13 лет назад
0 заметок

Squarespace CSS: 10 руководств по стилизации кнопок и форм вашего сайта — Пейдж Брантон

Squarespace

10 сен

Автор Пейдж Брантон

Если вы заметили мой первый пост в серии Squarespace CSS под названием « Squarespace CSS: что вам нужно знать, прежде чем начать »тогда вы вспомните, что все, что находится на вашем сайте, должно было быть сначала закодировано.

Во-первых, используя HTML (язык, который сообщает роботам вашего интернет-браузера

, какой

Кто-то должен был это сделать.

(И слава Squarespace, это был не ты!)

Ага! Каждый раз, когда вы выбираете блок контента (например, блок изображения, блок кнопок или текстовый блок), вы в основном выбираете предварительно созданный бит пользовательского кода для подключения вашего контента, а Squarespace обрабатывает все остальное!

Каждый раз, когда вы настраиваете параметр внутри этого блока, например, выравнивание текста или размер кнопки, роботы Squarespace неустанно работают за кулисами, чтобы изменить HTML и CSS вашего сайта в соответствии с ними!

Но, как и в любом письменном языке, здесь есть правила…

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

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

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

К счастью, в этом нет необходимости.

Но так же, как когда вы путешествуете по чужой стране и отчаянно нуждаетесь в туалете (¿Dónde está el baño?) , вам не помешает немного знать жаргон, чтобы выжить.

Готовы изучить несколько кусочков CSS, чтобы помочь вам избавиться от окна перетаскивания?

1. Как сделать кнопки одинаковой фиксированной ширины в Squarespace с помощью CSS.

Используемый метод внедрения CSS:

Окей, докс, так что вы знаете, как, когда вы добавляете кнопку в Squarespace, ширина автоматически изменяется в зависимости от того, сколько текста вы пытаетесь уместить на этой кнопке?

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

коротко и мило

Это кнопка с гораздо более длинным ярлыком

Как видите, тот, у которого меньше символов, на wayyyy меньше, чем его более многословный двоюродный брат!

Хорошие новости!

Если вам не нравится симметрия в дизайне, и вы хотите, чтобы все ваши кнопки были одинаковой ширины независимо от содержимого, вам подойдет этот 9Учебник 0098 от Лимон и Море!

Ниже вы можете просмотреть предварительный просмотр того, что делает этот кусочек CSS!

Коротко и мило

Это кнопка с гораздо более длинным ярлыком

2. Добавьте изображение к кнопке в Squarespace с помощью CSS

Используемый метод внедрения CSS:

Squarespace предоставляет вам всего несколько вариантов настройки кнопок во встроенном редакторе стилей сайта.

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

Этот трюк CSS для добавления пользовательских изображений или фона к вашим кнопкам пришел к нам прямо от самой богини Squarespace CSS! (Бекка из Inside the Square! )

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

3.

Используемый метод внедрения CSS:

Когда вы добавляете блок формы на свой сайт, Squarespace по умолчанию обрабатывает все эти поля в виде стопки.

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

Square Secrets и Square Secrets Business

Ребекка Грейс

(Выглядит сложнее, чем есть на самом деле, обещаю! 🤞)

Я проверил этот удобный CSS-трюк на себе и вот результат!

4. Добавьте плавающую или липкую кнопку «Забронировать сейчас» в Squarespace с помощью CSS.

Используемый метод внедрения CSS:

Хотите, чтобы ваш самый важный призыв к действию следовал за вашим посетителем, где бы он ни прокручивал ваш сайт?

Thirty Eight Visuals поможет вам (как для настольных компьютеров, так и для мобильных устройств!) с помощью этого фрагмента кода CSS для добавления кнопки «липкая книга сейчас» на ваш сайт!

Вот пример того, как это может выглядеть!

(P.S. кажется знакомым? Ага! Это макет сайта, который я использую в моем

Square Secrets Course

! Добрый день!)

5. Как изменить цвет и стиль шрифта в формах в Squarespace с помощью CSS

Используемый метод внедрения CSS:

Готовы к самому настоящему названию блога в Интернете?

«Как сделать контактную форму Squarespace менее уродливой»

Даже не шутки. Это настоящий учебник. (И, честно говоря, — это просто тот, который вы искали!)

Эрика по адресу Big Cat Creative полностью оправдывает свое имя с помощью этой удивительной пошаговой инструкции по замене этих менее привлекательных шрифтов форм на что-то, что полностью соответствует уникальной атмосфере вашего сайта!

Вот небольшая форма, которую я на скорую руку состряпал в качестве примера! (Но ты же, друг!)

6. Как добавить кнопку

в любом месте

Используемый метод внедрения CSS:

Помните, я упоминал ранее, как действуют все эти правила что функция перетаскивания Squarespace должна следовать, иногда может показаться немного ограничивающей?

Добавление блоков кнопок — один из таких случаев!

Если вы когда-либо чувствовали разочарование из-за того, как ваши кнопки выравниваются или располагаются автоматически, Minimist раскрывает секрет CSS, который вам нужен, чтобы вставить кнопку в любое место на вашем сайте!

Вот что может сделать для вас создание кнопок из текста/ссылок!

(Внимание! Все следующие кнопки автоматически складываются на мобильных устройствах, поэтому для этой маленькой иллюстрации лучше всего подходит просмотр на компьютере!)

Пример #1:

Допустим, я хочу выровнять по левому краю две кнопки одну над другой под этим фрагментом текста.

сказочно выглядишь!

самая простая вещь когда-либо

Пример #2:

Что происходит, когда я пытаюсь вставить два блока кнопок в один ряд и попытаться выровнять их по левому краю моего текста?

Ммммммм……

ВТФ????????????

Пример №3:

Я * мог* попытаться переместить их, вставив несколько разделительных блоков и изменив размер двух столбцов Squarespace, автоматически созданных, когда я перетащил два блока рядом…

ага. не совсем.

хотя серьезная попытка.

Пример #4:

Благодаря полям, которые я установил так, чтобы мой текст не шел от стены к стене на моем сайте, все еще не вполнеееее в линию!

Так что давайте использовать CSS из учебника Minimalist вместо этого!

Вот так! Гораздо лучше!

7.

Используемый метод внедрения CSS:

Squarespace упрощает подключение вашего нового сайта во все другие места, где вы появляетесь онлайн!

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

(Они не совсем подходят к декору , верно?)

Итак, если эта ярко-красная кнопка «Закрепить» в настоящее время убивает ваше настроение, я нашел просто учебник вам нужно для обменяю его на что-то более вас.

И вот этот едет с Седьмая станция !

8.

Используемый метод внедрения CSS:

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

Этот учебник от Мэри по адресу Maryphillip.com довольно простой и понятный, поэтому без лишних слов, вот что он может «делать». (Видите, что я там делал?)

9. Изменение цвета кнопки при наведении курсора в Squarespace с помощью CSS (с тенью)

Используемый метод внедрения CSS:

Анимация кнопок — это интересный способ удивить и порадовать посетителей сайта и сделать его более интерактивным!

Это похоже на ту сцену в «Эльфе», где взрослый Уилл Феррел нажимает все кнопки в лифте, так что они загораются в форме рождественской елки. 🎄

Мы никогда не теряем внутреннего ребенка, который любит нажимать кнопки и наблюдать, как происходит волшебство!

Вот учебное пособие от JacobCruiz.com , которое поможет привнести магию кнопок с эффектом наведения на ваш сайт!

(О, и вот краткий обзор того, как это выглядит, кстати!)

10. Измените цвет и шрифт кнопки блока новостной рассылки в Squarespace с помощью CSS

Используемый метод внедрения CSS:

Блоки информационных бюллетеней могут быть удобными машинами для создания списков!

А благодаря этому уроку от June Mango они получили гораздо больше информации о бренде!

На самом деле она дает фрагменты кода для настройки кнопок и ддд полей формы в форме вашего информационного бюллетеня.

Итак, если вы удалите заголовок и описание внутри формы и добавите текстовый блок выше, чтобы говорить, вы можете довольно быстро и легко сделать эти общие маленькие формы чертовски веселыми!

Скриншот формы для вашего удовольствия! 👇

Сентябрь 2020 Squarespace CSS

Пейдж Брантон

Пейдж Брантон — эксперт Squarespace, дизайнер веб-сайтов и онлайн-преподаватель.

Стилизация кнопок в виде ссылок

Squarespace CSS: 10 руководств по стилизации кнопок и форм вашего сайта — Пейдж Брантон

Но, как и в любом письменном языке, здесь есть правила…

1. Как сделать кнопки одинаковой фиксированной ширины в Squarespace с помощью CSS.

2. Добавьте изображение к кнопке в Squarespace с помощью CSS

3.

4. Добавьте плавающую или липкую кнопку «Забронировать сейчас» в Squarespace с помощью CSS.

5. Как изменить цвет и стиль шрифта в формах в Squarespace с помощью CSS

6. Как добавить кнопку

Вот так! Гораздо лучше!

7.

8.

9. Изменение цвета кнопки при наведении курсора в Squarespace с помощью CSS (с тенью)

10. Измените цвет и шрифт кнопки блока новостной рассылки в Squarespace с помощью CSS

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

Рубрики

Css style button: 92 Beautiful CSS buttons examples

Стилизация кнопок в виде ссылок

Squarespace CSS: 10 руководств по стилизации кнопок и форм вашего сайта — Пейдж Брантон

Но, как и в любом письменном языке, здесь есть правила…

1. Как сделать кнопки одинаковой фиксированной ширины в Squarespace с помощью CSS.

2. Добавьте изображение к кнопке в Squarespace с помощью CSS

3.

4. Добавьте плавающую или липкую кнопку «Забронировать сейчас» в Squarespace с помощью CSS.

5. Как изменить цвет и стиль шрифта в формах в Squarespace с помощью CSS

6. Как добавить кнопку

Вот так! Гораздо лучше!﻿

7.

8.

9. Изменение цвета кнопки при наведении курсора в Squarespace с помощью CSS (с тенью)

10. Измените цвет и шрифт кнопки блока новостной рассылки в Squarespace с помощью CSS

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

Рубрики

Вот так! Гораздо лучше!