Учебники

Pure.CSS — кнопки

Январь 4, 2019

Pure.CSS имеет очень красивый и отзывчивый CSS для настройки внешнего вида кнопки. Используются следующие CSS —

Sr.No. Имя класса и описание
1

чисто кнопки

Представляет стандартную кнопку. Может быть использован для стилизации ссылки и кнопки.

2

чисто-кнопка-инвалидов

Представляет отключенную кнопку. Для использования вместе с чистой кнопкой.

3

чисто-кнопка-активные

Представляет нажатую кнопку. Для использования вместе с чистой кнопкой.

чисто кнопки

Представляет стандартную кнопку. Может быть использован для стилизации ссылки и кнопки.

чисто-кнопка-инвалидов

Представляет отключенную кнопку. Для использования вместе с чистой кнопкой.

чисто-кнопка-активные

Представляет нажатую кнопку. Для использования вместе с чистой кнопкой.

пример

purecss_buttons.htm

Live Demo

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <style>
         .success,
         .error,
         .warning,
         .secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
         }
         
         .success {
            background: rgb(28, 184, 65); /* green */
         }

         .error {
            background: rgb(202, 60, 60); /* maroon */
         }

         .warning {
            background: rgb(223, 117, 20); /* orange */
         }

         .secondary {
            background: rgb(66, 184, 221); /* light blue */
         }

         .xsmall {
            font-size: 70%;
         }

         .small {
            font-size: 85%;
         }

         .large {
            font-size: 110%;
         }

         .xlarge {
            font-size: 125%;
         }
      </style>	  	  
   </head>
	
   <body> 
      <h2>Standard Buttons</h2>
      <button class = "pure-button">Click Me</button>
      <button class = "pure-button pure-button-active">Click Me</button>
      <button class = "pure-button pure-button-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class = "pure-button">Link</a>
      <a class = "pure-button pure-button-active">Link</a>
      <a class = "pure-button pure-button-disabled">Disabled Link</a>

      <h2>Primary Button</h2>
      <a class = "pure-button pure-button-primary">Submit</a>    

      <h2>Customized button</h2>
      <button class = "pure-button success">Success</button>
      <button class = "pure-button error">Error</button>
      <button class = "pure-button warning">Warning</button>
      <button class = "pure-button secondary">Secondary</button>
	  
      <h2>Different Sized button</h2>
      <button class = "pure-button xsmall">Extra Small</button>
      <button class = "pure-button small">Small</button>
      <button class = "pure-button large">Large</button>
      <button class = "pure-button xlarge">Extra Large</button>
   </body>
</html>

Результат

Проверьте результат.

42
Share: