Разное

Стиль кнопки css: Buttons Основные стили кнопок CSS уроки для начинающих академия

24.06.2023

Использование псевдоклассов в Mobile SMARTS

Mobile SMARTS платформа

← Предыдущая статья Читать далее «Использование переменных и событий» →

Категории:  Псевдо-HTML верстка в Mobile SMARTS

Последние изменения: 13.05.2022

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

Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсора или ссылка, меняющая свой цвет после того, как по ней осуществили переход.

В Mobile SMARTS используются следующие псевдоклассы:

  • hover (для кнопок и списков) — определяет стиль элемента, на который наведён курсор мыши.
  • active (для кнопок и списков) — определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.
  • disabled (для кнопок) — определяет стиль кнопки с атрибутом enabled= «False».

С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Для этого потребуется добавить строки кода (см. примеры ниже) в файл global.css, который находится на ПК в папке по пути «C:\ProgramData\Cleverence\Databases\имя вашей базы\Documents» (путь указан по умолчанию). На ТСД этот файл дублируется, и может иметь названия global.css, global.android.css, global.cf.css.

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

  1. Для кнопок.

    Возьмем за образец кнопку «Выйти» в окне успешной активации лицензии для продукта Frontol Simple Mobile. С помощью псевдоклассов можно сделать эту кнопку всегда активной, всегда неактивной или подсвечивать другим цветом в момент длительного нажатия.

    Код кнопки:

    CSS
    <button direction="return" ><r  color="#EF5981">ВЫЙТИ</r></button>

    Css-класс white_button

    • Кнопка активна.

    CSS
    {
.white_button:active
}
background-color: #FFFFFF;
corner-radius: 4%;
font-size:14dp;
border: 0px solid #1F3C5B;
color: white;
padding: 10dp 16dp 9dp 16dp;

  2. Кнопка неактивна.

    CSS
    {
white_button:disabled
}
background-color: #6A7F8D;
corner-radius: 4%;
font-size:14dp;
border: 0px solid #1F3C5B;
color: white;
padding: 10dp 16dp 9dp 16dp;
}

  3. Кнопка меняет цвет при длительном нажатии.

    CSS
    {
.white_button:hover
}
background-color: #FFFFFF;
corner-radius: 4%;
font-size:14dp;
border: 0px solid #1F3C5B;
color: white;
padding: 10dp 16dp 9dp 16dp;

    4. В данном случае псевдоклассами являются hover, active, disabled. Для каждого случая задан свой атрибут background-color, что позволяет гибко регулировать цвет фона кнопки для разных случаев.

  4. Для элементов списка.

    При длительном нажатии элемент списка подсвечивается другим цветом. Реализуется с помощью псевдоклассов active, disabled.

    CSS
    .list_item_custom
{
background-color: #EDF2F6;
padding:0dp 0dp 5dp 0dp;   
}
.list_item_custom:active
{
background-color: #919191;   
padding:0dp 0dp 5dp 0dp;
}
.list_item_custom:disabled
{
background-color: #6A7F8D;   
padding:0dp 0dp 5dp 0dp;
}

После того как вы внесли правки в файл global.css на ПК, потребуется удалить из папки «MobileSMARTSv3 —> Documents» на ТСД папку базы, для которой вы вносили изменения, и заново подключиться к ней. В противном случае внесенные правки не будут применены к приложению на ТСД.


Была ли статья полезна?

Читать далее «Использование переменных и событий» →

Нечего не меняется в стиле кнопки, что делать?

Весь код покажите html и css

student_-VH8UeUB

3 years ago

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style. css">
</head>
<body>
<div>
<div>
<div>
<div>
<h2> <a href="/"> <strong>My Films</strong> </a> </h2>
<h3> New films in this channel</h3>
</div>
</div>
<div class = "menuBar">
<ul>
<li> <a href="#">Главная</a> </li>
<li><a href="#">Фильмы</a><li>
<li><a href="#">Сериалы</a><li>
<li><a href="#">Рейтинг фильмов</a><li>
<li><a href="#">Контакты</a> <li>
</ul>
</div>
</div>
</div>
<div>
<div>
<div>
<h3>Поиск</h3>
<form method="post" action="#">
<input type="search" name="search_field" placeholder="ваш запрос"/>
<input type="submit" name="btn" value="найти"/>
</form>
</div>
</div>
</div>
</body>
</html>

student_5WeleoKk

3 years ago

* {
margin: 0;
padding: 0;
}
input[type="text"], input[type="password"], input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input,textare {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}
. colorAll {
background-color: #0a0a0a;
}
.header {
background-color: black;
height: 200px;
padding-top: 10px;
}
.text_logo h2 {
margin-left: 90px;
margin-top: 40px;
font: normal 300% "century gothic",arial,sans-serif;
letter-spacing: 0.3em;
color: #ffffff;
}
.text_logo h3 {
margin-left: 90px;
font: normal 80% "century gothic",arial,sans-serif;
letter-spacing: 0.47em;
color: #ffffff;
}
.text_logo h2 a {
text-decoration: none;
color: #ffffff;
}
.menuBar {
width: 1420px;
height: 46px;
margin-top: 25px;
}
ul.menu {
float: right;
letter-spacing: 0.2em;
}
ul.menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
}
ul.menu li a {
font: normal 100% "trebuchet ms" , sans-serif;
display: block;
height: 20px;
padding: 6px 35px 5px 28px;
color: #fff;
text-decoration: none;
}
ul.menu li.selected a {
color: #b3b3b3;
}
ul.menu li a:hover {
color: #edc534;
}
.site_content {
width: 250px;
overflow:hidden;
margin: 20px auto 0 auto;
background-color: #0a0a0a;
}
.sitebar_container {
float: right;
width: 220px;
}
.
 
 
 sitebar {
float: right;
width: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #404040;
border-radius: 5px;
background-color: #404040;
}
.btn {
padding: 8px;
background-color: blue;
cursor: pointer;
}

student_5WeleoKk

3 years ago

1. У вас вложенность блоков div перепутана, например:

 <div>
        <div>

div с классом main должен быть главным div и в него должны входить остальные блоки.

2.  Textarea с опечаткой написана:

input,textare {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}

3. Лучше используйте названия классов как в уроках, а не такие menuBar

Вот здесь посмотрите живой пример как должно быть (кнопка «Показать ответ» справа сверху):

https://fructcode.com/ru/courses/html-and-css/footer-interactive/

student_-VH8UeUB

3 years ago

спасибо

student_5WeleoKk

3 years ago

html — Стили кнопок CSS

Я новичок в html, и у меня проблемы со стилями кнопок CSS.

Я понимаю код .button пожалуйста, опишите мне приведенный выше код, который я округлил красной рамкой.

Помощь от тех, кто знает о html и css 2

Итак, вы видите различные виды селекторов для CSS.

Это способ нацеливания на различные части вашего HTML.

Первый пример 

 .button span {
  ...
}

Возможно, это наиболее распространенное использование селекторов, называемых «потомками». .button span «означает» HTML с классом «кнопка» и имеет потомка span элемент Таким образом, это будет выглядеть так:

 .button span {
  красный цвет
} 
 <кнопка>
  Текст кнопки

<кнопка>
  Какой-то текст
  

  Я красный

<кнопка>
  Какой-то текст
  
 
Я не красный

Второй пример

.button span:after использует вышеупомянутый селектор потомков, но также комбинирует его с селектором «и». .. это span:after часть!

Любые селекторы, записанные с : перед ними, называются « псевдоэлементами «. Это могут быть события мыши (например, :hover ) или псевдоэлементы :before или :after .

 .button span:hover {
  красный цвет;
} 
 <кнопка>
  Текст кнопки

<кнопка>
  Я красный, когда вы наводите на меня курсор
 

  

  Но я никогда не буду красным, когда ты наведешь курсор

<кнопка>
  Я не красный, когда вы наводите курсор мыши

<дел>
  Я буду красным, когда вы наведете на меня курсор

CSS может быть сложным, это огромный мир! Обязательно ознакомьтесь с документацией MDN или W3Schools, так как у них есть действительно хорошие интерактивные примеры.

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Стилизация кнопок в виде ссылок

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

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

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

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

Во-первых, разметка: хотя вы можете использовать input type="submit" в качестве элемента отправки, и этот пример будет работать точно так же, элемент кнопки, на мой взгляд, гораздо лучший вариант. Он действительно гибкий и может иметь множество различных элементов, вложенных внутрь, если вы того пожелаете, от простого текста с изображением до заголовков и абзацев. Эта статья о кнопках, написанная Аароном Густафсоном еще в 2006 году, все еще довольно актуальна сегодня и объясняет некоторые способы использования скромного элемента кнопки.

Еще одна полезная статья, также опубликованная некоторое время назад, объясняет методы, которые Wufoo использует для стилизации ссылок, чтобы они выглядели как кнопки. Действительно важная вещь, которую следует усвоить из этой статьи, это то, что добавление overflow: visible на кнопку устраняет сумасшедшую проблему с шириной, которую IE любит делать с нами.

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

Базовая страница в этой демонстрации имеет следующие стили, примененные к ссылкам и основной части:

 body {
семейство шрифтов: "Verdana" без засечек;
}
ссылка,
а: посетил {
цвет синий;
}
а: наведите,
фокус,
а: активный {
черный цвет;
}

Затем я добавляю волшебное заклинание, чтобы увеличить ширину в IE для всех кнопок:

 button {
переполнение: видимое;
ширина: авто;
}

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

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

 кнопка.ссылка {
семейство шрифтов: "Verdana" без засечек;
размер шрифта: 1em;
выравнивание текста: по левому краю;
цвет синий;
фон: нет;
маржа: 0;
заполнение: 0;
граница: нет;
курсор: указатель;
}

Интересно, что Mozilla не позволит вам выбрать текст элемента кнопки, как это делают другие браузеры, поэтому, чтобы переопределить это и обеспечить, чтобы пользователь мог выбирать текст нашей псевдоссылки, вы также можете применить следующее:

-moz-user-select: текст;

Вы также можете переопределить все остальные стили кнопок, если таковые имеются.

Теперь у вас почти есть ссылка. Те из вас, кто обращал пристальное внимание ранее, заметят пока еще необъяснимый внутренний промежуток в нашей кнопке. Это связано с тем, что не представляется возможным напрямую установить text-decoration для кнопки, и в зависимости от того, как у вас установлены стили ссылок, это то, что вы, вероятно, захотите сделать.

Правило text-decoration: underline фактически применяется к диапазону при наведении или фокусе кнопки. Этот способ более гибкий, если в какой-то момент вы решите добавить или удалить подчеркивание при наведении.

button.link диапазон {
оформление текста: подчеркивание;
}
button.link: диапазон наведения,
button.link:диапазон фокуса {
черный цвет;
}

Естественно, ‘ любимый ‘ браузер, Internet Explorer 6 не будет отображать эффект наведения на вашу ссылку, потому что он не наводит курсор на произвольные элементы, а только на фактические ссылки. Вы можете имитировать этот эффект с помощью Javascript, если хотите, добавляя класс при наведении и удаляя его при mousout. Другие ограничения этого метода заключаются в том, что выделение текста выглядит немного хитроумным во всех версиях IE.