Красивые кнопки CSS с оригинальными эффектами. Html код кнопки для сайта


html - Как создать кнопку HTML, которая действует как ссылка?

Кажется, есть три решения этой проблемы (все с плюсами и минусами).

Решение 1: Кнопка в форме.

<form method="get" action="/page2"> <button type="submit">Continue</button> </form>

Но проблема заключается в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конец URL-адреса. Таким образом, другими словами, для кода выше ваш URL-адрес будет выглядеть следующим образом:

http://someserver/pages2?

Есть один способ исправить это, но для этого потребуется конфигурация на стороне сервера. Одним из примеров использования Apache Mod_rewrite было бы перенаправление всех запросов с завершающим ? на их соответствующий URL без ?. Вот пример использования .htaccess, но есть полный поток здесь:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC] RewriteRule ^/?(index\.cfm)? /? [R=301,L]

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

Плюсы:

  • Это настоящая кнопка, и семантически это имеет смысл.
  • Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).
  • Нет JavaScript, не требуется сложный стиль.

Минусы:

  • Трейлинг ? выглядит уродливым в некоторых браузерах. Это может быть исправлено с помощью взлома (в некоторых случаях) с использованием POST вместо GET, но чистым способом является перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304.
  • Добавляет дополнительный элемент <form>
  • Позиционирование элементов при использовании нескольких форм может быть сложным и ухудшается при работе с адаптивными проектами. Некоторое расположение может стать невозможным для достижения этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если на проект влияет эта проблема.

Решение 2: Использование JavaScript.

Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Пример ниже может быть улучшен и удален из HTML, но здесь просто проиллюстрировать идею:

<button>Continue</button>

Плюсы:

  • Простой (для базовых требований) и сохраняющий семантику, не требуя дополнительной формы.
  • Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).

Минусы:

  • Требуется JavaScript, что означает менее доступный. Это не идеально подходит для базового (основного) элемента, такого как ссылка.

Решение 3: Якорь (ссылка), стилизованная как кнопка.

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

Плюсы:

  • Простой (для основных требований) и хорошая поддержка кросс-браузера.
  • Не требуется <form> для работы.
  • Не требуется JavaScript для работы.

Минусы:

  • Семантика вроде бы сломана, потому что вам нужна кнопка, которая действует как ссылка, а не ссылка, которая действует как кнопка.
  • Он не будет воспроизводить все действия решения №1. Он не будет поддерживать то же поведение, что и кнопка. Например, при перетаскивании ссылки реагируют по-разному. Также триггер ссылки "пробел" не будет работать без какого-либо дополнительного кода JavaScript. Это добавит много сложности, поскольку браузеры не согласуются с тем, как они поддерживают события keypress на кнопках.

Заключение

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

Если JavaScript не является препятствием для ваших требований к доступности, тогда решение # 2 (JavaScript) будет предпочтительнее, чем # 1 и # 3.

Если по какой-то причине доступность имеет жизненно важное значение (JavaScript не является вариантом), но вы находитесь в ситуации, когда ваш дизайн и/или конфигурация вашего сервера мешают вам использовать параметр №1, тогда решение №3 (Якорь, подобная кнопке), является хорошей альтернативой для решения этой проблемы с минимальным воздействием на использование.

qaru.site

HTML кнопка, как ссылка и ссылка, как кнопка

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

Итак, приступим.

Внимание:В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «https://bloggood.ru/». Естественно, вам нужно заменить эти адреса своими.

HTML кнопка как ссылка

 1  способ:В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:

<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET"> <input type="submit" value="Кнопка" /> </form>

2 способ:Также можно использовать HTML события:

<input value="Кнопка" type="button" />

3 способ:Тоже взят из HTML события, только другим способом:

JS:

<script type="text/javascript"> function BlogGood() { location.href='https://bloggood.ru/'; } </script>

HTML:

<input value="Кнопка" type="button" />

BlogGood() – это название функции вы можете назвать по своему.

HTML ссылка как кнопка

Теперь сделаем так, чтобы ссылка отображалась, как кнопка :coffe:.

1  способ:Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:

<a href=" ВАША_ССЫЛКА_НА_СТРАНИЦУ "><img src="knopka.jpeg"></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

CSS:

a { -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Chromium */ padding: .2em .75em; text-decoration: none; }

HTML:

<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

3 способ:

Вы можете в CSS прописать свои стили для кнопки.Выглядеть это будет вот так:

CSS:

.ssilka { border:1px solid #ccc; // рамка background:#eaeaea; //фон padding: .2em .75em; //отступы внутри text-decoration: none; //убрать подчеркивание ссылки }

HTML:

<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

Вроде, ничего не пропустил и ничего не напутал.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: css, html, javascript, Вебмастеру, для сайта

bloggood.ru

Как сделать кнопку ссылкой

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

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type="submit":

<form action="/example/">    <button type="submit">Кнопка-ссылка</button></form>

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Демо

«Живая» демонстрация такой кнопки-ссылки:

Масштабирование Full HD в 4K без размытия

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:

<form action="/example/">    <input type="hidden" name="foo"   value="bar" />    <input type="hidden" name="lorem" value="ipsum" />    <button type="submit">Кнопка-ссылка</button></form>

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/Blink и WebKit

В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

<form action="/example/">    <button type="submit">Кнопка-ссылка</button></form>

приведёт на адрес /example/? вместо правильного /example/.

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

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

<a href="/example/"><button>Кнопка-ссылка</button></a>

Но согласно HTML5 такое решение синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

<button>Кнопка-ссылка</button>

Но такая кнопка не работает при выключенном JavaScript, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Нестандартные расширения CSS

Описанные ниже возможности нестандартные, и использовать их не рекомендуется.

Firefox и Chromium

Firefox и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) поддерживают нестандартные префиксированные варианты свойства appearance, значение button которых позволяет оформить как кнопку произвольный элемент, в том числе ссылку:

A.example {       -moz-appearance: button; /* Firefox */    -webkit-appearance: button; /* Chromium */}

Демо

«Живая» демонстрация такой кнопки-ссылки:

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

tanalin.com

Создание кнопки в HTML

 Создание кнопки в HTML

После того как разобрались с еще одним элементом формы textarea мы переходим, наверное, к последнему часто используемому элементу формы – это к кнопкам. Существует пять видов кнопок для формы:

1. Кнопка для отправки формы. Это самый часто используемый вид кнопки, после нажатия, на которую происходит обращение к обработчику формы, который указан в атрибуте action="formdata.php" и уже ему передаются данные из элементов формы.

2. Это кнопка для очистки после нажатия на которую происходит очистка всех полей (элементов) в форме. То есть все возвращается к первоначальному виду формы.

3. Третий вид кнопки это кнопка картинка. Часто бывает такое, что нужно применить кнопку необычного вида, например это кнопка типа img - изображение.

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

5. Пятый вид так же кнопка для отправки формы, после нажатия на которую так же происходит обращение к обработчику формы action="formdata.php", и уже ему передаются данные из элементов формы. При условии, что такая кнопка находится внутри тегов <form> </form>

Итак, мы разберем все эти четыре вида кнопки и первое это разберем кнопку для отправки данных формы.

Создание кнопки «Отправить».

Такая кнопка создается с помощью тега <input> и обязательного атрибута type со значение submit, который и указывает, что это кнопка для отправки submit, что в переводе означает подтвердить или отправить. Так же желательно задать имя для кнопки через уже известный атрибут name="submit", ну и конечно же, чтобы появилась какая-то надпись на кнопке используем атрибут value="Отправить". Если все это собрать в кучку у нас получится следующий вид:

HTML

После нажатия на такую кнопку, как выше уже было написано, будет происходить обращение к обработчику формы, который находится в атрибуте action="formdata.php". А мы переходим к следующему виду кнопки.

Создание кнопки «Очистки формы».

Кнопка для очистки полей создается, так же как и для отправки, за исключением того что нужно изменить тип кнопки в атрибуте type, указав значение reset. Остальное повторяем, задаем имя кнопки name="reset" и чтобы появилась надпись на кнопке, используем атрибут value="Очистить". В результате получаем:

HTML

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

Создание кнопки «Отправить в виде картинки».

Для начала, изображение вашей кнопки, помещаем в уже ранее созданную папку images, которая находится на одном уровне с файлом index.html. Создается такая кнопка все также, за исключением все того же атрибута type, указав ему значение image, указывающее тип кнопки «картинка». Только, раз это картинка то нужно указать, где она лежит. Указывается путь к картинке через атрибут src="". Зададим еще имя кнопке name= "imageBatton" и вот и все. Текст для кнопки в атрибуте value не нужен, так как на кнопке уже все есть.

HTML

Нажимая на кнопку-картинку, будет также происходить обращение к обработчику action="formdata.php" для отправки данных формы, то есть такая кнопка работает так же как и кнопка типа submit. И рассмотрим последний вид кнопки.

Создание обычной кнопки.

Такая кнопка создается также просто, как и все раннее рассмотренные, меняется только тип кнопки type="button". Все остальное также: указываем имя для кнопки name="button"; указываем, через атрибут value="Кнопка", надпись, которая будет отображается на кнопке. После нажатия на такую кнопку никаких действий не происходит. Такая кнопка может использоваться как в рамках формы, так и за ее пределами. Такая кнопка часто используется в сочетании с языками JavaScript и JQery.

HTML

Создание кнопки, используя тег button.

Такая кнопка создается с помощью тега <button> </button>. Ее так же можно создать, как на базе картинки, так и в стандартном виде, указав текст кнопки. На такой кнопке можно разместить различные элементы HTML, например картинку, так же к такой кнопке можно применять определенные стили: изменить размер, цвет фона, шрифт текста и др. Такая кнопка может, размещается как внутри <form> </form> так и за ее приделами. Однако если после нажатия на такую кнопку требуется отправить данные обработчику, то такая кнопка должна обязательно находится внутри тега <form> </form>.

HTML

Кнопка с текстом Кнопка с рисунком

Вот в целом рассмотрели все виды кнопок и общая картина должны получится следующая.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Первая HTML страница</title> </head> <body>

Так создаются кнопки HTML. Смотрите результат в Демо. У Вас должна была получится такая же картина. А мы переходим к следующему уроку.

webteoretik.ru

Красивые кнопки для сайта онлайн

Как сделать красивые кнопки для сайта html, CSS или изображением. 

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

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

Сервисы по созданию кнопок англоязычные и онлайн без регистрации, но сложности не представляют, всё наглядно понятно и для русскоязычного населения.

Красивые кнопки для сайта онлайн картинкой

Первый сервис Da Button Factory.

 

Давайте пройдёмся по настройкам, которые расположены слева и справа от визуального отображения вашей будущей кнопки.

Настройки кнопки слева:

  1. Текст, который будет отражаться на кнопке.
  2. Шрифт текста. Русский язык поддерживают только шрифты Sans Serif, Serif, Monospaced, Condensed и Calibri.
  3. Если поставить галочку то будет жирный текст.
  4. Курсив или нет.
  5. Размер текста.
  6. Цвет текста.
  7. Тень текста.
  8. Толщина тени.
  9. Цвет тени текста.
  10. Способ скачивания — картинка или CSS.
  11. Формат картинки — jpg, png или ico.

Настройки кнопки справа:

  1. Углы — прямоугольные или закруглённые.
  2. или самостоятельная настройка скругления углов.
  3. Цвет кнопки и эффекты, градиент или нет, два цвета.
  4. Верхний цвет.
  5. Нижний цвет.
  6. Отблески.
  7. Обводка — размер и цвет.
  8. Тень кнопки — размер, цвет и с какой стороны.
  9. Размер кнопки — ширина и высота.

Вот после этих небольших манипуляций скачиваете на комп по кнопке «download».

Кнопки для сайта html, CSS

Второй сервис Button Generator предлагает сгенерировать кнопку в виде кода html и CSS.

 

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

Что можно настроить у кнопки

Настройки в середине:

  1. Цвет фона.
  2. Цвет кнопки.
  3. Цвет градиента(если снята галочка с пункта 9).
  4. Цвет надписи.
  5. Цвет обводки.
  6. Цвет тени кнопки.
  7. Цвет тени текста.
  8. Если галочка стоит, то прозрачная кнопка, тоесть будет цвет фона.
  9. Градинет да или нет.

 Настройки справа:

  1. Текст на кнопке.
  2. Размер кнопки.
  3. Название CSS класса, удобно чисто ля вас, чтоб в файле CSS знать, что это за настройки. По умолчанию называется «myButton», если хотите можете прописать своё название.
  4. Выбор шрифта, всего 7(семь), все поддерживают русский язык.
  5. Жирный шрифт.
  6. Курсив.
  7. Ширина.
  8. Высота.
  9. Радиус скругления углов.
  10. Ширина обводки.
  11. Фон тени кнопки имеет настройки — внутр или снаружи, расположение по вертикали и горизонтали, размытие и размер.
  12. Тень текста.
  13. Расположение по вертикали.
  14. Расположение по горизонтали.
  15. Размытие.

После всех этих несложных манипуляций нажимаете «Copy Code» и у вас в буфере сохраняется код, Который нужно сохранить(нажав Ctrl + V на клавиатуре) в текстовый файл или word, смотря чем вы пользуетесь.

Вот как он будет выглядеть:

где первое — это html, который вы будете вставлять в то место статьи, где будет располагаться кнопка. Вместо значка решётки (#) нужно поставить ссылку куда будет осуществляться переход, а вместо слова «green» текст, который будет на кнопке.

Вторую же часть нужно сохранить в файле style.css , который находится в корне вашего сайта. Если у вас WordPress или CMS с редактором, то можно открыть этот файл из админки, для всех остальных нужно будет зайти на хостинг и искать файл там.

wpnik.ru

Красивые кнопки CSS с оригинальными эффектами

В этой статье, Вашему вниманию представлены 13 кнопок с различными Эффектами при наведении и нажатии.

Различные формы и цвета для кнопки на Ваш вкус сделать не сложно, и об этом подробно в статье Блок с закруглёнными углами и тенью. Эллипс

Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow, поэкспериментировать со свойствами gradient и background

Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.

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

Чтоб быстро увидеть код, понравившейся кнопки, щёлкните по ссылке «Код», рядом с кнопкой.

При наведении:

Кнопка Градиент Код

Кнопка Наплывание Код

Кнопка Обесцвечивание Код

Кнопка Всплывание Код

Кнопка Искажение Код

Кнопка Многоцветная рамка Код

Кнопка 3D кнопка Код

Появление текста вращением Код

Появление текста Код

AnimationКнопка Появление картинки Код

При нажатии:

 

Красная кнопка Код

 

 

Кнопка с индикатором Код

 

 

Клавиша Код

Важно! Для тех кто всё ещё пользуется визуальным редактором.

При переключении режимов редактора событие onclick слетает и его нужно прописывать по новой, или вместо конструкции <buttom onclick…. использовать <a href=….

Градиент

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .one { color: #524E49; background: #fdeaa8; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; } .one:hover { background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777); } </style> </head> <body> <button>Кнопка</button> </body> </html>

Наплывание

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .two { color: #524E49; background: #fdeaa8; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; position: relative; box-sizing: border-box; transition: all 500ms ease-out; } .two:before { content:''; position: absolute; top: 0px; left: 0px; width: 100%; height: 0px; background: rgba(148,144,143,0.4); border-radius: 5px; transition: all 0.5s ease-out; } .two:hover:before { height: 42px; } </style> </head> <body> <button>Кнопка</button> </body> </html>

Обесцвечивание

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .three { color: #524E49; background: #fdeaa8; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; position: relative; box-sizing: border-box; transition: all 500ms ease-out; } .three:hover { background: rgba(0,0,0,0); color: #3a7999; box-shadow: inset 0 0 0 3px #3a7999; } </style> </head> <body> <button>Кнопка</button> </body> </html>

Всплывание

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .elementy { color: #524E49; background: #fdeaa8; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .elementy:after { content: ""; border-radius: 5px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); opacity: 0; -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .elementy:hover { -webkit-transform: translate(10px); transform: translate(10px); } .elementy:hover:after { opacity: 1; } </style> </head> <body> <button>Кнопка</button> </body> </html>

Искажение

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .five { color: #524E49; background: #fdeaa8; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; position: relative; box-sizing: border-box; transition: all 500ms ease-out; } .five:hover { transform: skew(10deg); } </style> </head> <body> <button>Кнопка</button> </body> </html>

Разноцветная рамка

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .six { color: #524E49; background: #fdeaa8; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; position: relative; box-sizing: border-box; transition: all 500ms ease-out; } .six:hover { box-shadow: 0px 0px 0px 2px #f90914, 0px 0px 0px 7px #a7f9c9, 0px 0px 0px 9px #f90914, 0px 0px 5px 10px #ff4d00; } </style> </head> <body> <button>Кнопка</button> </body> </html>

3D кнопка

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .seven { color: #524E49; background: #fdeaa8; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; position: relative; box-sizing: border-box; transition: all 500ms ease-out; } .seven { transform-style: preserve-3d; } .seven:after { top: -50%; left: 0px; width: 100%; position: absolute; background: #fdeaa8; border-radius: 5px; box-shadow: 0px 1px 3px; content: 'Кнопка'; transform-origin: left bottom; transform: rotateX(90deg); } .seven:hover { transform-origin: center bottom; transform: rotateX(-90deg) translateY(100%); } </style> </head> <body> <button>Кнопка</button> </body> </html>

Появление вращающегося текста

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .eight { color: #000; background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); width: 80px; height: 25px; padding: 10px; border-radius: 5px; box-shadow: 0px 2px 4px; display: inline-block; overflow: hidden; position: relative; text-decoration: none; } .eight:before { display: block; content: ""; height: 100%; opacity: 0; position: absolute; width: 100%; z-index: 2; } .eight:after { font-family: 'Lucida Console'; content: attr(title); display: block; font-size: 18px; text-align: center; opacity: 0; position: absolute; text-transform: none; top: 50%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0) translateY(-50%); transform: scale(0) translateY(-50%); -webkit-transition: all 550ms ease-in-out; transition: all 550ms ease-in-out; width: 80%; z-index: 3; } .eight:hover:before { opacity: 0.6; } .eight:hover:after { opacity: 1; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .eight:after { -webkit-transform: scale(0) rotate(-360deg) translateY(-50%); transform: scale(0) rotate(-360deg) translateY(-50%); } .eight:hover:after { -webkit-transform: scale(1) rotate(0deg) translateY(-50%); transform: scale(1) rotate(0deg) translateY(-50%); } </style> </head> <body> <a title="knopka" href="#"></a> </body> </html>

Появление текста

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .nine { color: #000; background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); width: 80px; height: 25px; padding: 10px; border-radius: 5px; box-shadow: 0px 2px 4px; display: inline-block; overflow: hidden; position: relative; text-decoration: none; } .nine:before { display: block; content: ""; height: 100%; opacity: 0; position: absolute; width: 100%; z-index: 2; } .nine:after { font-family: 'Lucida Console'; content: attr(title); display: block; font-size: 18px; text-align: center; opacity: 0; position: absolute; text-transform: none; top: 50%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0) translateY(-50%); transform: scale(0) translateY(-50%); -webkit-transition: all 550ms ease-in-out; transition: all 550ms ease-in-out; width: 80%; z-index: 3; } .nine:hover:before { opacity: 0.6; } .nine:hover:after { opacity: 1; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } </style> </head> <body> <a title="knopka" href="#"></a> </body> </html>

Появление картинки

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> .ten { color: #524E49; background: #F7E09C; padding: 10px; font-size: 20px; border-radius: 5px; box-shadow: 0px 1px 3px; position: relative; box-sizing: border-box; transition: all 500ms ease-out; } .ten { padding: 10px 35px; overflow: hidden; } .ten img { position: absolute; top: 7px; left: -30px; transition: all 200ms ease; } .ten:hover img { left: 5px; } </style> </head> <body> <button><img src="images/Animation.gif">Кнопка</button> </body> </html>

Красная кнопка

CSS .tower { position: relative; } .round { position: absolute; width: 70px; height: 70px; border: 4px solid hsl(5, 40%, 70%); border-radius: 50%/50%; background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%); сursor: pointer; transform: rotate(30deg); } .round:active { width: 69px; height: 69px; box-shadow: 0 0 hsl(5, 60%, 60%); border: 3px solid hsl(5, 40%, 70%); background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%); } HTML <div> <a href=""></a> </div>

Кнопка с индикатором

CSS .switch { width: 70px; height: 70px; position: relative; cursor: pointer; } .dot { position: absolute; top: 7%; left: 7%; display: block; width: 70px; height: 70px; border-radius: 50%/50%; background: hsl(0, 0%, 90%); box-shadow: 0 3px 5px hsl(0, 0%, 75%), inset 0 1px 0 hsl(0, 0%, 95%), inset 0 -5px 5px hsl(0, 0%, 75%), inset 0 5px 5px hsl(0, 0%, 95%); z-index: 1; } .circ { display: block; position: absolute; width: 82px; height: 82px; top: 0; left: 0; border-radius: 50%; background: linear-gradient(#ccc, #fff); box-shadow: inset 0 2px 1px hsl(0, 0%, 75%), inset 0 -2px hsl(0, 0%, 75%); } .switch .dot:before { content: ""; position: absolute; width: 20%; height: 20%; left: 40%; top: 40%; border-radius: inherit; background: radial-gradient(#fff, #333); } .switch:active .dot:before { content: ""; background: radial-gradient(#fff, #02A829); } .switch:active .dot { background: radial-gradient(#fff, #ccc); width: 69px; height: 69px; } HTML <div> <div> <a></a> </div> </div>

Клавиша

CSS .switch2 { width: 75px; height: 45px; position: relative; cursor: pointer; } .dot1 { position: absolute; top: 7%; left: 7%; display: block; width: 75px; height: 45px; border-radius: 7px; background: linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 96%)); box-shadow: -3px 5px hsl(0, 0%, 75%), 1px -2px hsl(0, 0%, 75%), inset 0 0px 5px hsl(0, 0%, 95%), inset 0 -1px 5px hsl(0, 0%, 95%); z-index: 1; } .circ1 { display: block; position: absolute; width: 87px; height: 57px; top: 0; left: 0; background: linear-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%)); box-shadow: inset 0 1px 1px hsl(0, 0%, 95%), inset 0 -1px 1px hsl(0, 0%, 95%); } .dot1:before { content: "Enter"; color: hsl(0, 0%, 60%); position: absolute; left: 20%; top: 15%; font-size: 20px; } .switch2:active .dot1:before { content: "Enter"; } .switch2:active .dot1 { background: radial-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%)); box-shadow: -2px 4px hsl(0, 0%, 75%), 0px -1px hsl(0, 0%, 75%), inset 0 1px 2px hsl(0, 0%, 95%), inset 0 -1px 2px hsl(0, 0%, 95%); } HTML <div> <div> <a></a> </div> </div>

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

Желаю творческих успехов.

Текст появляющийся на изображениях CSS < < < В раздел > > > Анимация для шапки сайта

Перемены

Америка борется с терроризмом и ожирением. Особая удача, когда попадается жирный террорист

starper55plys.ru

Как оформить в css кнопки для сайта – красивые, трехмерные

Как оформлять в сss кнопки для сайта

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

Как создаются кнопки

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

<input type = "submit" ...>

<input type = "submit" ...>

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

С помощью того же тега input:

<input type = "button" value = "Нажми меня">

<input type = "button" value = "Нажми меня">

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

(или span если она должна быть строчным элементом). Естественно, этот вариант хуже тем, что вам придется дополнительно писать некоторые стили для оформления, а input type = “button” уже имеет некоторые по умолчанию.

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

<input type = "image" src = "путь к рисунку">

<input type = "image" src = "путь к рисунку">

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

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

Button можно использовать как в форме, так и саму по себе. Если же результат нажатия необходимо отправить на сервер, то тег обязательно должен находиться в контейнере form для корректной работы.

Как сделать красивые кнопки для сайта на css

Что ж, с созданием все понятно, а теперь вернемся к их оформлению. Допустим, мы создали ее с помощью input, что дальше? Если вам нужно изменить внешний вид элемента, то можно воспользоваться разными css-свойствами. Например, давайте пропишем такие:

input[type="button"]{ background: #8AD47D; border-style: ridge; border-radius: 10px; }

input[type="button"]{

background: #8AD47D;

border-style: ridge;

border-radius: 10px;

}

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

padding: 15px; cursor: pointer;

padding: 15px;

cursor: pointer;

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Вставка графики в кнопку. В качестве преимуществ тега button я указывал то, что можно вставить картинку. Но на самом деле ее без проблем можно сделать и в элементе input. Так даже правильнее, потому что изображение добавляется не тегом img, а с помощью задания фона. В качестве примера я использую изображение button.png.

Желательно в кнопки вставлять именно png-изображения, так как они могут хорошо улучшить внешний вид.

background: #8AD47D url(button.png) no-repeat; padding-left: 55px;

background: #8AD47D url(button.png) no-repeat;

padding-left: 55px;

Соответственно, запретим картинке повторяться по горизонтали и вертикали, а также дадим большой отступ слева, так как именно в этом месте мы и расположим картинку. Вернее, она станет там сама, ее положением можно управлять с помощью background-position.

Соответственно, давайте допишем позицию фона. Для примера я предлагаю разместить картинку справа, а не слева. Также для этого нам придется изменить сторону, с которой у нас внутренний отступ. Его нужно сделать справа.

background: #8AD47D url(button.png) no-repeat right 50%; padding-right: 55px;

background: #8AD47D url(button.png) no-repeat right 50%;

padding-right: 55px;

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

Трехмерность с помощью теней

Следующий прием выполняется с помощью одного из свойств css3 – box-shadow. Он позволяет добавить кнопке трехмерности, ведь иногда это нужно по дизайну. Раньше для этого требовалось использовать дополнительные изображения, сейчас же это вовсе необязательно, гораздо лучше использовать тень.

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

box-shadow: 3px 3px orange;

box-shadow: 3px 3px orange;

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

Внешний вид при наведении

В целом большинство кнопок как-то меняют свой внешний вид при наведении или клике по ним. Это хороший тон веб-дизайна, потому что это более удобно для пользователя, который будет видеть явно, что он навел курсор на этот элемент. Как поменять внешний вид кнопки при наведении? Используйте псевдокласс hover.

input[type="button"]:hover

input[type="button"]:hover

Вот так вот селектор подошел бы в нашем случае. Он бы выбрал все input с типом button, на которые наведен курсор. Если нужно выбрать только 1 элемент, лучше к нему обращаться через стилевой класс или идентификатор. Соответственно, вы можете изменить цвет фона, текста, поменять картинку, трансформировать элемент и т.д. Если вы хотите, чтобы изменения происходили плавно, а не резко, то используйте свойство transition.

input[type="button"]{ transition: 1s; }

input[type="button"]{

transition: 1s;

}

Теперь все изменения внешнего вида будут происходить плавно в течение 1 секунды. Итак, сегодня мы с вами посмотрели простые css свойства, которые можно применять для оформления кнопок. Как видите, ничего сложного. Более мощную информацию вы можете найти в премиум-курсе по CSS3, а я на этом с вами прощаюсь.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

webformyself.com