Адаптивные CSS3 кнопки

Адаптивные CSS3 кнопки

Адаптивные CSS3 кнопки

HTML Структура

Адаптивные CSS3 кнопки: CSS3 HTML5. Структура кнопок — HTML5, их легко редактировать/интегрировать. CSS разделены от HTML и прокомментированы. Эти кнопки имеют 8 макетов и 16 цветов, любая из тем кнопок может использоваться отдельно без связи с другими. Также есть красивые анимации CSS3.

HTML структура:

<!-- Начало кнопки -->
<a class="color-(color number) puerto-btn-(Layout number)">
    <!-- Иконка Font Awsome -->
    <span><i class="fa fa-edit"></i></span>
    <!-- Название -->
    <small>Редактировать</small>
</a>
<!-- Конец кнопки -->

Или с помощью тега button следующим образом:

<!-- Начало кнопки -->
<button class="color-(color number) puerto-btn-(Layout number)">
    <!-- Иконка Font Awsome -->
    <span><i class="fa fa-edit"></i></span>
    <!-- Название -->
    <small>Редактировать</small>
</button>
<!-- Конец кнопки -->

Есть 4 разные раскладки кнопок и 16 различных цветов.

CSS структура:

<!-- Мобильные мета для адаптивности -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Normalize.css отображает в браузерах элементы
    более последовательно -->
<link rel="stylesheet" href="css/normalize.css">
 
<!-- Стили кнопок -->
<link rel="stylesheet" href="css/main.css">
 
<!-- Font awesome Иконки -->
<link rel="stylesheet" href="css/font-awesome.min.css">

Первый normalize.css — родовой файл сброса. Многие браузеры интерпретируют поведение по умолчанию HTML элементов по — разному. С помощью CSS файла общего сброса, мы можем работать несмотря на это. Также normalize.css содержит несколько общих стилей, такие как якорный тег цвета, размер шрифта и др. Имейте в виду, эти значения могут быть перекрыты в другом месте в файле.

Второй файл main.css содержит все специфические стилистики для данного пункта.


Скачать


Aliexpress INTAliexpress INTAliexpress INT

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *