Кнопки с использованием только CSS
предосторожность
Эта статья была опубликована более чем год назад, там, возможно, были события.
Пожалуйста, примите это во внимание.
В сегодняшней статье мы рассмотрим, как превратить простую форму, с помощью кнопки Неформатированной в столь же простой форме с отформатированной кнопкой. Все цвета, градиенты и тени “построенный” используя правила CSS на версии 3. Эти несколько простых правил, должны принять некоторые’ с помощью плоскогубцев, потому что они хорошо работают с браузером на основе Webkit (Сафари, Konquerror, IPad / iPhone) е Gecko (Firefox и т.д.), но они бесполезны во всех версиях Internet Explorer до 9.
Давайте начнем с HTML. Кроме того, мы будем связывать файл “style.css”:
<HTML>
<глава>
<ссылка отн ="таблицы стилей" HREF ="style.css" тип ="текст / CSS" кодировка ="UTF-8" />
</глава>
<тело>
<Форма действие ="#">
<Таблица>
<тр>
<тд>имя:</тд><тд><тип входного ="текст" имя ="название" значение =""></тд>
</тр>
<тр>
<тд>почта:</тд><тд><тип входного ="текст" имя ="почта" значение =""></тд>
</тр>
<тр>
<тд = Объединение колонок"2" выравнивание ="центр"><Кнопка ID ="кнопка">представить</кнопка></тд>
</тр>
</Таблица>
</форма><!--конец form-->
</тело>
</HTML>
Без форматирования задается CSS это будет результат “застывший”.
1. Home Style
Мы начинаем входить в наш “style.css” следующие строки кода, чтобы дать стиль к кнопке:
кнопка{
ширина: 100ПВ;
контур: никто;
курсор: указатель;
выравнивания текста: центр;
текст-отделка: никто;
шрифт: полужирный 12px Arial, Helvetica, без засечек;
цвет: #FFF;
набивка: 10ПВ 20px;
граница: твердый 1px # 0076a3;
фон: #0095CD;
}
В то же время мы даем фиксированный размер, allineamo текст в центре без отделки, Мы установить шрифт (шрифт), цвет (цвет) и расстояние от других элементов (набивка). Затем мы устанавливаем цвет фона кнопки и цвет границы. Это результат:
2. Градиент фон
Тогда мы могли бы добавить градиент к цвету фона, дать ему трехмерным. Добавим следующие строки к элементу “кнопка” наш “style.css”:
фон: -WebKit-градиент(линейный, левый верхний, левый нижний, от(#00Adee), в(#0078a5)); фон: -WebKit-линейный градиент(Топ, #00Adee, #0078a5); фон: -Мос-линейный градиент(Топ, #00Adee, #0078a5); фон: -мс-линейный градиент(Топ, #00Adee, #0078a5); фон: -о-линейный градиент(Топ, #00Adee, #0078a5);
Из этих строк есть немного, чтобы объяснить, добавить вертикальный градиент на фоне. Это результат:
3. Круглые углы
В зависимости от ваших предпочтений мы хотим, чтобы скруглить углы кнопки. Добавим следующие строки к элементу “кнопка” наш “style.css”:
-Мос-граница радиуса: 20ПВ; -WebKit-границы радиуса: 20ПВ; граница радиуса: 20ПВ;
Это может помочь понять функционирование этих ценностей. Вы должны играть немного’ чтобы найти желаемый результат. Ниже результат:
4. тень
Чтобы дать последний штрих трех измерений необходимо дать небольшую тень. Добавим эти последние строки элемента “кнопка” наш “style.css”:
-Мос-бокс-тень: 0 1ПВ 3px RGBA(0,0,0,0.5); -WebKit-бокс-тень: 0 1ПВ 3px RGBA(0,0,0,0.5); коробчатого тень: 0 1ПВ 3px RGBA(0,0,0,0.5);
Это результат:
И теперь у нас есть стиль кнопки без выбора, но чтобы установить классическое действие на мыши и нажмите. Следующие строки добавляются в файл “style.css”:
кнопка:зависать {
фон: #0095CD;
фон: -WebKit-градиент(линейный, левый верхний, левый нижний, от(#0078a5), в(#00Adee));
фон: -WebKit-линейный градиент(Топ, #0078a5, #00Adee);
фон: -Мос-линейный градиент(Топ, #0078a5, #00Adee);
фон: -мс-линейный градиент(Топ, #0078a5, #00Adee);
фон: -о-линейный градиент(Топ, #0078a5, #00Adee);
фон: линейный градиент(Топ, #0078a5, #00Adee);
}
кнопка:активный{
позиция: родственник;
Топ: 1ПВ;
}
И это операционный результат:
0 Комментарии