Дизайн и анимация кнопок на HTML и CSS
 | |
| Здесь разберем подробно одну оригинальную копку с уникальным эффектом, который происходит при нажатии на основу, и все это на CSS. Вряд ли есть веб-сайт, в котором нет хотя бы одной кнопки в этот день и возраст. Следовательно, научиться стилю одного очень важно, если вы хотите стать успешным веб дизайнером. CSS, это идеальный инструмент для разработки кнопки HTML. Этот учебник по кнопке CSS научит вас всем советам и хитростям этого ремесла. Вы увидите, как установить идеальный и уникальный стиль кнопки CSS в кратчайшие сроки. Этот учебник начнется с основ и постепенно перейдет к более сложным концепциям. Но как только вы узнаете основы, у вас не будет проблем с освоением передовых технологий. Вы увидите, как добавить эффекты анимации к кнопке CSS, покрасить его, сформировать, поместить его и многое другое! В этом уроке вы также научитесь делать кнопку HTML реагировать на наведение мыши и добавлять тени. Стиль основы кнопки CSS: 1. Кнопки создаются с использованием HTML; 2. Кнопки можно стилизовать с помощью CSS; 3. Кнопки CSS могут отличаться по размеру, цвету, стилю; 4. Кнопки CSS часто используются рядом с полями ввода; Стиль кнопки CSS С помощью кнопок HTML можно назначить несколько стилей CSS. В этом разделе вы узнаете, как создать гладкий дизайн для ваших кнопок. Вы научитесь добавлять цвет фона, управлять размером своей кнопки и шрифтом, назначать закругленные углы, выравнивать несколько кнопок и многое другое. Размер текста В некоторых случаях вам может понадобиться маленькая буква внутри крошечной кнопки, а в другом случае вам нужны значимые символы. Размер текста кнопки можно изменить с помощью font-size свойства. Закругленные углы По умолчанию все элементы HTML "включая кнопки" имеют форму прямоугольного прямоугольника. Чтобы смягчить края или даже сделать круглые кнопки, вам нужен CSS. С помощью свойства можно добавить закругленные углы кнопки border-radius. Границы Каждая кнопка может иметь вокруг нее рамку. Чтобы добавить этот фрейм, мы используем границы CSS. Стиль, цвет и ширина границы можно задать с помощью border сокращенного свойства. Тень Чтобы кнопка больше выделялась из текста и создавала иллюзию того, что она ближе к пользователю, мы можем добавить тень. Тени кнопки можно добавить с помощью box-shadow свойства. Неактивный взгляд Некоторые кнопки должны оставаться на странице, даже если они больше не используются. Однако вы можете указать, что они отключены с помощью CSS. Прозрачность кнопки можно добавить с помощью opacity свойства. Между тем, cursor свойство может добавить знак запрета на парковку после того, как вы установили его значение для недопустимости. Ширина Некоторые кнопки должны казаться маленькими, а другие должны растягиваться совсем немного. Горизонтальные размеры кнопки можно изменить с помощью width свойства. Когда вам нужно выровнять несколько кнопок бок о бок, CSS будет пригодиться. Группу кнопок можно создать, удалив поля и добавив float свойство. Пограничные группы Когда вы ставите несколько кнопок близко друг к другу, назначение границ может быть хорошей идеей. Границы CSS могут помочь вам отделить одну кнопку от другой. Клавишу с кнопками можно создать с помощью border сокращенного свойства. Вертикальные группы Кнопки могут не только размещаться бок о бок, но и вертикально одна под другой. Группу кнопок с вертикальной границей можно создать, установив display свойство для блокировки. Образ Иногда вам нужна кнопка, которая появляется поверх изображения. Для достижения этого эффекта вам понадобится postion свойство стиля. Стиль анимации CSS Вы можете назначить различные эффекты анимации вашим кнопкам. Например, мы делаем значок рядом с кнопкой, создаем нажатие кнопки, добавляем эффект затухания и многое другое. Кнопка со стрелкой Используя:hover селектор и opacity, вы можете сделать значок стрелки рядом с текстом вашей кнопки, как только курсор перемещается по нему. Нажатая кнопка Вы знаете, как некоторые кнопки имеют эту анимацию, которая заставляет ее казаться, что вы на самом деле физически нажали ее? Вы можете создать этот вид, используя эффекты преобразования CSS. Кнопка Fade-in Использование transition и opacity мы можем создать выцветание в действие. Вам также нужен:hover селектор, чтобы установить триггер для эффекта. Кнопка пульсации Чтобы создать эффект пульсации, вам понадобится несколько свойств стиля, установленных на месте. Вам нужно будет указать transition для заполнения, поля, цвета фона, непрозрачности кнопки и использования псевдо класса CSS :active. Стиль кнопки CSS В моем сознании нет никаких сомнений, что теперь вы можете создавать первоклассные дизайнерские кнопки. Давайте посмотрим, что мы узнали, чтобы сделать информацию лучше: 1. HTML кнопки можно стилизовать с помощью CSS; 2. Вы можете назначить цвет, цвет фона, выравнивание текста, размер шрифта, ширину и высоту, границу, радиус границы, отступы, маржу, поплавок, отображение и многие другие свойства стилизации CSS для ваших элементов кнопки, чтобы дать им профессиональный вид и установить их позиционирование; 3. Вы можете анимировать свои кнопки с помощью свойств перехода CSS, преобразования, непрозрачности и селектора hover. Но теперь подходим к самому главному, это кнопка с оригинальной анимацией, которая будет появиться только при клике. Это не простая сменя палитры цвета, здесь все намного современно сделано, что думаю многим понравится, где уже самостоятельно вы сможете выставить свой оттенок. Так будет смотрется после, как установите, где были добавлены тени и обвод, чтоб придась немного своей оригинальности. Так как сам обвод в аналогичном цвете фона, но вот тени дают ему отличный обзор, где сразу по другому смотрится.  HTML Код <button class="datedoecompeling">ZORNET.RU</button> CSS Код .datedoecompeling { position: relative; background-color: #0b6b16; border: none; font-size: 29px; color: #e8e8e8; padding: 15px; width: 201px; text-align: left; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; text-decoration: none; overflow: hidden; cursor: pointer; text-align: center; border: 2px solid #f1f1f1; box-shadow: 0px 5px 20px rgba(74, 70, 70, 0.74), 0px 7px 37px -15px rgba(162, 158, 158, 0); } .datedoecompeling:after { content: ""; background: #2834d6; display: block; position: absolute; padding-top: 305%; padding-left: 350%; margin-left: -27px !important; margin-top: -130%; opacity: 0; transition: all 0.9s } .datedoecompeling:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s; } Вот из всего выше приведенного мы создаем уникальную по своему эффекту кнопку, где при нажатии на ее создается как быстрая молния, а точнее проблеск другой гаммы цвета. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |