Кнопки на Pure CSS - httpdoc.ru

Кнопки на Pure CSS

Кнопки очень важны и используются часто. Чистый CSS имеет очень красивый и отзывчивый CSS для настройки внешнего вида кнопки. Есть много типов кнопок, которые можно добавить на свой сайт.

В Pure используются различные типы кнопок:

  • Кнопки по умолчанию
  • Отключенные кнопки
  • Активные кнопки
  • Основные кнопки
  • Индивидуальные кнопки

Мы также увидим, как использовать кнопки разных размеров, а также использовать с ними значки.


Кнопки по умолчанию в Pure.CSS

Это самая простая кнопка в Pure, вы можете добавить ее, используя класс pure-button в любом теге <a> или <button> . Посмотрите ниже, чтобы увидеть синтаксис для использования кнопок на веб-странице, а также посмотрите полный пример в редакторе try-it, чтобы правильно его понять.

< class ="pure-button" HREF = "#" > Pure button < >
< button class ="pure-button" > Pure Button < /button >

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Default button </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <style>
      div{
      margin:10px;
      }
    </style>
  </head>
 <body> 
  <div>
    <a class="pure-button" href="#">A Pure Button</a>
    <button class="pure-button"> A Pure Button </button>
  </div>
 </body> 
</html>

Выход

Pure.CSS Default button
Pure button

Отключенные кнопки на чистом CSS

Отключенная кнопка - это кнопка, на которую вы не сможете нажать, но она будет видна пользователю. Класс для этой кнопки pure-button-disabled . Этот класс будет использоваться вместе с pure-button классом, чтобы сделать кнопку отключенной. Не забудьте использовать оба класса, это предопределенный синтаксис, не нужно много думать об этом.

Примечание. disabled Атрибут HTML также можно использовать напрямую с pure-button классом, чтобы отключить его. Посмотрите ниже синтаксис, чтобы отключить кнопку обоими способами:
< button class = "pure-button pure-button-disabled" > Отключенная кнопка < / a >
< button class = "pure-button" disabled > Отключенная кнопка < / button >

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Disabled button </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <style>
      div{
      margin:10px;
      }
    </style>
  </head>
 <body>  
  <div>
    <button class="pure-button pure-button-disabled"> A Disabled Button </button>
    <button class="pure-button" disabled> A Disabled Button </button>
  </div>
 </body>  
</html>

Выход

Pure.CSS Disabled button

Активная кнопка на чистом CSS

Активная кнопка - это еще одна кнопка, но с немного другим свойством. Каждый раз, когда пользователь нажимает на эту кнопку, кажется, что она «нажата». Это класс, pure-button-active который снова используется вместе с pure-button классом.

Посмотрите ниже, чтобы увидеть синтаксис для добавления этой кнопки на веб-сайт:

< class = "pure-button pure-button-active" href = "#" > Активная кнопка < / a >
< button class = "pure-button pure-button-active" > Активная кнопка < / button >

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Active button </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <style>
      div{
      margin:10px;
      }
    </style>
  </head>

<body>
 <div>
  <a class="pure-button pure-button-active" href="#"> Active Button </a>
  <button class="pure-button pure-button-active"> Active Button </button>
 </div>
</body>
</html>

Выход

Pure.CSS Active button
Активная кнопка

Первичная кнопка Pure.CSS

Основная кнопка станет синей и представляет собой основное действие. Это класс pure-button-primary . Опять же, всегда используйте его с pure-button классом.

Посмотрите ниже, чтобы увидеть синтаксис для добавления этой кнопки на веб-сайт:

< Класс = «чистая кнопка чистой кнопка первичный» HREF = «#» > Первичных кнопки < / а >
< кнопка класс = «чистая кнопка чистой кнопка первичная» > Первичного Кнопка < / кнопка >

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Primary button </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <style>
      div{
      margin:10px;
      }
    </style>
  </head>

<body>
 <div>
  <a class="pure-button pure-button-primary" href="#"> A Primary Button </a>
  <button class="pure-button pure-button-primary"> A Primary Button </button>
 </div>
</body>
</html>

Выход

Pure.CSS Primary button
Основная кнопка

Настраиваемая кнопка Pure.CSS

Pure дает вам возможность настроить кнопки для вашего веб-сайта. Настроить чистую кнопку очень просто. Просто создайте собственный класс, например button-foo, и добавьте необходимый CSS, который вы хотите использовать в кнопке, а затем используйте этот класс вместе с pure-button классом.

Посмотрите на пример ниже, где мы создали разные классы, которые будут давать разные цвета кнопкам. Мы использовали эти классы с button тегом для создания кнопок. Взгляните на него и настройте, используя различные свойства CSS.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Customized button </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
  <style scoped>
.button-success,
.button-error,
.button-warning,
.button-secondary {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	}

.button-success {
	background: rgb(28, 184, 65);
	/* this is a green */
	}

.button-error {
	background: rgb(202, 60, 60);
	/* this is a maroon */
	}

.button-warning {
	background: rgb(223, 117, 20);
	/* this is an orange */
	}

.button-secondary {
	background: rgb(66, 184, 221);
	/* this is a light blue */
	}
div{
      margin:10px;
     }
</style>
<body>
  <div>
    <button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
  </div>
</body>  
</html>

Выход

Pure.CSS Customized button

Размер кнопки Pure.CSS

Вы также можете изменить размер кнопок, если считаете, что размер по умолчанию слишком велик. Это часть настройки кнопок. Здесь мы также создадим разные классы для разных размеров и укажем размер внутри них.

В приведенном ниже примере мы использовали размеры:

  • Очень маленькие кнопки
  • Маленькие кнопки
  • Обычные кнопки
  • Большие кнопки
  • Очень большие кнопки
Вы можете указать любой размер для любой кнопки. Попробуйте этот пример в редакторе и используйте разные размеры, чтобы увидеть результат -
Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Button Size</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
<style scoped>
.button-xsmall {
  font-size: 70%;
}

.button-small {
  font-size: 85%;
}

.button-large {
  font-size: 110%;
}

.button-xlarge {
  font-size: 125%;
}
div{
  margin:10px;
}
</style>
<body>
<div>
  <button class="button-xsmall pure-button">Extra Small Button</button>
  <button class="button-small pure-button">Small Button</button>
  <button class="pure-button">Regular Button</button>
  <button class="button-large pure-button">Large Button</button>
  <button class="button-xlarge pure-button">Extra Large Button</button>
</div>
</body>
</html>

Выход

Pure.CSS Button Size

Кнопки с иконками

Чистый CSS дает свободу использования различных пакетов значков, мы будем использовать их внутри кнопок, чтобы улучшить их внешний вид. В приведенном ниже примере используются значки пакета font-awesome, поскольку вы можете видеть использование пути CDN font awesom. Как мы знаем, мы должны использовать класс значка в <i> теге. Взгляните на него и попытайтесь понять, как добавлять значки с кнопками.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Button With Icons </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<style type="text/css">
div {
  margin: 10px;
}
</style>
  </head>

<body>
    <div>
      <button class="pure-button">
      <i class="fab fa-google-plus-g fa-lg"></i> Google </button>
      <a class="pure-button" href="#">
      <i class="fab fa-facebook-square  fa-lg"></i> Facebook </a>
      <button class="pure-button">
      <i class="fab fa-instagram fa-lg"></i> Instagram </button>
      <a class="pure-button" href="#">
      <i class="fab fa-youtube fa-lg"></i> Youtube </a>
      <button class="pure-button">
      <i class="fab fa-twitter fa-lg"></i> Twitter </button>
    </div>
</body>
</html>

Выход

Pure.CSS Button With Icons
Facebook YouTube



HTMLDOC.ru 2021