Как сделать красиво submit

Создаем красивую форму обратной связи самостоятельно

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

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

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

Дизайн

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

Разметка HTML5

Итак, у нас есть дизайн контактной формы, с которой нам предстоит работать. Теперь наша задача – построить структуру данной формы при помощи HTML5, чтобы, в конечном счете, у нас получилась отличная форма обратной связи для сайта на html и php.

Doctype

У нас есть пустой документ PHP, давайте же приступим к созданию соответствующего doctype, который, между прочим, создать при помощи HTML5 намного проще, чем при использовании предыдущей версии!

Почувствовали разницу? Как говорится – no comments; победитель очевиден. Более того, пример с doctype не единичен, т.к. многие теги и атрибуты отныне у HTML5 представлены в намного упрощенном виде – теперь нет пугающих по длине кодов и ужасающих по длине строк JavaScript.

Структура

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

В данном случае мы имеем секции: «заголовок», «контент» и «футер». Все очень просто, не так ли? А с использованием HTML5, будет все еще намного проще!

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

Как вы видите, я назначил каждому элементу класс «body», чтобы показать, что они относятся к основному контенту и для того, чтобы они были оформлены в соответствующем стиле. Вы, конечно, можете все это проделать с помощью дивов, но только с несколькими основными body-элементами; это будет также просто как назначение классов.

Форма

Вот как выглядит эта разметка. Дайте-ка пояснить в ней несколько вещей.

Input Tag

Input Name

Ко всем input > тегам присужден атрибут «name». Мы еще поговорим об этом подробнее чуть позже, когда перейдем к созданию PHP-скрипта, который будет обрабатывать данные, введенные в контактную форму.

Input Type

Введение атрибута «type» демонстрирует значительное преимущество HTML5 по сравнению с XHTML. Но, к сожалению, многие новые input > types не могут быть использованы на всю мощь из-за пока еще минимальной поддержки; радует то, что ситуация в скором времени должна измениться и эти атрибуты взвалят на себя огромную часть работы, сделав нашу жизнь намного проще.

Однако уже сейчас мы можем увидеть, пусть и небольшие, но некоторые преимущества, используя новые атрибуты types. Как, например, сплошь положительный атрибут type=»email». Пусть его позитивное влияние и не столь значительно, но он стоит того, чтобы его

прописать, хотя все браузеры, которые его не поддерживают, распознают данный атрибут как type=»text». А вот с айфонами ситуация совсем другая: данный атрибут вызывает изменения в раскладке клавиатуры при переходе к полю ввести «email»: клавиша пробел становится меньше по размеру, а в центре появляется знак “@”.

Атрибут Placeholder

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

Атрибут «placeholder» достаточно хорошо поддерживается большинством последних версий браузеров. Он позволяет присваивать значение (т.е. текст) текстовому полю, которое при постановке курсора исчезает и если текст не был введен в выбранное поле, а курсор убран – снова возникает.

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

А вот и то, что получится после прописки всех разметок к странице:

Не очень-то и симпотично, не правда ли? Вот и пришло время перейти к таблице стилей CSS, чтобы придать нашей css форме обратной связи, так сказать, товарный вид, а именно приблизить ее к оригинальному дизайну, что был представлен в начале статьи. Давайте придадим тексту формы привычную ориентацию: чтобы текст полей располагался не слева направо, а сверху вниз.

Источник

Кнопки | CSS

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.

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

Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.

Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

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

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

Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.

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

Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

А вот всякие перемещения работают на ура.

Довольно популярно разделение кнопки на два цвета

Красивые кнопки CSS

Кнопки «Скачать» CSS

Стилизация кнопок с помощью CSS

Анимированная кнопка: «свечение текста»

Стиль кнопок с бликами

Кнопки меню

Объёмная кнопка CSS

Вдавленная кнопка

Выпуклая кнопка HTML

Круглые CSS кнопки

Анимированная кнопка CSS

Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].

3d кнопка CSS

Оформление кнопок

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

Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

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

98 комментариев:

damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html

В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.

Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.

если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри

Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )

background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));

Вот сейчас опять перечитываю в поисках как убрать подчёркивание.

Очень не хватает просто подробного описания, какой параметр что значит.

Всякие комбинации служебных слов перепробовал, но понять так и не смог.

Может что подскажете. Заранее огромное Спасибо!

a.button_main_ico <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover <
background-color: #BABABA;
>
a.button_main_ico:focus <
background-color: #D8D8D8;
>
a.button_main_ico:focus:hover <
background-color: #DFDFDF;
>

a.button_main_ico:before <
content: url(../ico_L_ready.png);
> NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;

a.button_main_ico:before,
a.button_main_ico span <
content: url(../ico_L_ready.png);
vertical-align: middle;
>

Спасибо за участие и заданное направление.

За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.

в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка

Тоже но без иконки:
Кнопка

В CSS
a.button_main <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover <
background-color: #BA0000;
>
a.button_main:focus <
background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover <
background-color: #DF000;
>

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

Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(

Источник