BVB Source Codes

hologram Show buttonSkins.css Source code

Return Download hologram: download buttonSkins.css Source code - Download hologram Source code - Type:.css
  1. /*doc
  2. ---
  3. parent: button
  4. name: buttonSkins
  5. title: Button Styles
  6. ---
  7.  
  8. For buttons, see [the buttons docs][button].
  9.  
  10. Button                                            | Class             | Description
  11. ------------------------------------------------- | ----------------- | -----------
  12. <button class="btn btnDefault">Default</button>   | `btn btnDefault`  | This is what buttons look like, this is the go to button style.
  13. <button class="btn btnPrimary">Primary</button>   | `btn btnPrimary`  | Use this button as the primary call to action
  14. <button class="btn btnDanger">Delete</button>     | `btn btnDanger`   | This button is for delete actions, these actions should also have a confirmation dialog
  15. <button class="btn btnDisabled">Disabled</button> | `btn btnDisabled` | I'm afraid I can't let you do that, yet.
  16.  
  17. ```haml_example_table
  18. %button.btn.btnDefault Hi
  19.  
  20. %button.btn.btnPrimary Hi
  21.  
  22. %button.btn.btnDanger Hi
  23.  
  24. %button.btn.btnDisabled Hi
  25. ```
  26.  
  27. Here's an example combining a style with a size
  28.  
  29. ```haml_example
  30. %button.btn.btnPrimary.btnFullWidth Hi
  31. ```
  32. */
  33.  
  34. .btnDefault,
  35. a.btnDefault {
  36.   border: 1px #d7d7d7 solid;
  37.   background: #f3f3f3;
  38.   color: #222222;
  39.   text-shadow: 0 1px 0 white;
  40.   -webkit-box-shadow: 0 1px 0px #cccccc;
  41.   -moz-box-shadow: 0 1px 0px #cccccc;
  42.   box-shadow: 0 1px 0px #cccccc;
  43. }
  44.  
  45. .btnDefault:hover,
  46. .btnDefault:focus {
  47.   background: #f6f6f6;
  48. }
  49.  
  50. .btnDefault:active {
  51.   position: relative;
  52.   top: 1px;
  53.   -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  54.   -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  55.   box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  56. }
  57.  
  58. .btnPrimary,
  59. a.btnPrimary, .btnDanger,
  60. a.btnDanger {
  61.   color: white;
  62.   text-shadow: 0 0 0;
  63. }
  64.  
  65. .btnPrimary,
  66. a.btnPrimary {
  67.   border: 1px #d14b00 solid;
  68.   background: #ff5c00;
  69.   -webkit-box-shadow: 0 1px 0px #d35500;
  70.   -moz-box-shadow: 0 1px 0px #d35500;
  71.   box-shadow: 0 1px 0px #d35500;
  72. }
  73.  
  74. .btnPrimary:hover,
  75. .btnPrimary:focus {
  76.   background: #ff660f;
  77. }
  78.  
  79. .btnPrimary:active {
  80.   position: relative;
  81.   top: 1px;
  82.   -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  83.   -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  84.   box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  85. }
  86.  
  87. .btnDanger,
  88. a.btnDanger {
  89.   border: 1px #a21a10 solid;
  90.   background: #cc2114;
  91.   -webkit-box-shadow: 0 1px 0px #d35500;
  92.   -moz-box-shadow: 0 1px 0px #d35500;
  93.   box-shadow: 0 1px 0px #d35500;
  94. }
  95.  
  96. .btnDanger:hover,
  97. .btnDanger:focus {
  98.   background: #da2315;
  99. }
  100.  
  101. .btnDanger:active {
  102.   position: relative;
  103.   top: 1px;
  104.   -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  105.   -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  106.   box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  107. }
  108.  
  109. .btn[disabled],
  110. .btn[disabled]:hover,
  111. .btn[disabled]:focus
  112. .btn[disabled]:active,
  113. .btnDisabled,
  114. a.btnDisabled,
  115. .btnDisabled:hover,
  116. .btnDisabled:focus,
  117. .btnDisabled:active {
  118.   border: 0px;
  119.   background: #cccccc;
  120.   color: #999999;
  121.   text-shadow: 0 0 0;
  122.   cursor: default;
  123. }
  124.  
  125. .btn[disabled]:active,
  126. .btnDisabled:active {
  127.   position: static;
  128.   color: #999999;
  129.   box-shadow: none;
  130. }
  131.  
downloadbuttonSkins.css Source code - Download hologram Source code
Related Source Codes/Software:
www.html5rocks.com - ....a top-notch resource for web developer 2017-05-12
MTStatusBarOverlay - A custom iOS status bar overlay seen in Apps like ... 2017-05-12
blueprint - Reverse engineer server configuration ... 2017-05-12
PullToRefresh - A simple iPhone TableViewController for adding the... 2017-05-12
mrjob - Run MapReduce jobs on Hadoop or Amazon Web Service... 2017-05-11
isso - a Disqus alternative https:... 2017-05-12
python3-cookbook - "The Python Cookbook" 3 rd Edition Translatio 2017-05-12
TSA-Travel-Sentry-master-keys - 3D reproduction of TSA Master key 2017-05-12
fatfree - A powerful yet easy-to-use PHP micro-framework des... 2017-05-13
rolify - Role management library with the resource scoping 2017-05-13
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top