├── .editorconfig
├── .gitignore
├── LICENSE.txt
├── README.md
├── css
    └── style.css
├── index.html
├── package.json
└── style.scss


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | end_of_line = lf
 8 | indent_size = 2
 9 | indent_style = space
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .sass-cache
2 | node_modules
3 | .DS_Store
4 | package-lock.json
5 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org/>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## CSS patterned buttons
2 | 
3 | Based on [catalin.red/css3-patterned-buttons](https://catalin.red/css3-patterned-buttons)
4 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | .btn{display:inline-block;position:relative;padding:6px 20px;cursor:pointer;font-size:1rem;font-weight:500;text-decoration:none;white-space:nowrap;border:1px solid;background-image:linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3' viewBox='0 0 8 8'%3E%3Cg fill='%23fff' fill-opacity='.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");transition:background-color .2s ease-out;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.3),0 2px 2px -1px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.3) inset}.btn:active{top:1px;box-shadow:0 1px 1px rgba(0,0,0,0.3) inset;background-image:none}.btn[disabled]{cursor:default;position:static;box-shadow:none}.btn-sm{padding:4px 12px;font-size:.85rem}.btn-lg{padding:12px 30px;font-size:1.1rem;text-transform:uppercase}.btn-light{border-color:#d5d5d5;color:#333;background-color:#eee}.btn-light:hover{background-color:#fbfbfb}.btn-light[disabled]{border-color:#fbfbfb;background:#fbfbfb;color:gray}.btn-green{border-color:#4CAF50;color:#fff;background-color:#4CAF50}.btn-green:hover{background-color:#5cb860}.btn-green[disabled]{border-color:#5cb860;background:#5cb860;color:#b5dfb7}.btn-red{border-color:#F44336;color:#fff;background-color:#F44336}.btn-red:hover{background-color:#f55a4e}.btn-red[disabled]{border-color:#f55a4e;background:#f55a4e;color:#fccbc7}.btn-blue{border-color:#2196F3;color:#fff;background-color:#2196F3}.btn-blue:hover{background-color:#39a1f4}.btn-blue[disabled]{border-color:#39a1f4;background:#39a1f4;color:#b2dbfb}.btn-group{display:inline-block;vertical-align:middle;background:rgba(0,0,0,0.05);border-bottom:1px solid rgba(0,0,0,0.08);padding:4px;border-radius:6px}.btn-group .btn{float:left;border-radius:0}.btn-group .btn:active{box-shadow:0 0 1px rgba(0,0,0,0.2) inset,5px 0 5px -3px rgba(0,0,0,0.2) inset,-5px 0 5px -3px rgba(0,0,0,0.2) inset}.btn-group .btn:first-child{border-radius:3px 0 0 3px}.btn-group .btn:first-child:active{box-shadow:0 0 1px rgba(0,0,0,0.2) inset,-5px 0 5px -3px rgba(0,0,0,0.2) inset}.btn-group .btn:last-child{border-radius:0 3px 3px 0}.btn-group .btn:last-child:active{box-shadow:0 0 1px rgba(0,0,0,0.2) inset,5px 0 5px -3px rgba(0,0,0,0.2) inset}body{background:linear-gradient(#546E7A, rgba(255,60,60,0.2) 70%),linear-gradient(-45deg, #e16a67 25%, rgba(255,211,65,0.8) 75%);background-repeat:no-repeat;background-attachment:fixed;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <link rel="stylesheet" href="css/style.css">
 8 | 	<title>CSS patterned buttons</title>
 9 | </head>
10 | <body>
11 | 
12 | 	<button type="button" class="btn btn-sm btn-light">Button</button>
13 | 	<button type="button" class="btn btn-sm btn-red">Button</button>
14 | 	<button type="button" class="btn btn-sm btn-green">Button</button>
15 | 	<button type="button" class="btn btn-sm btn-blue">Button</button>
16 | 
17 | 	<br><br>
18 | 
19 | 	<button type="button" class="btn btn-sm btn-light" disabled>Button</button>
20 | 	<button type="button" class="btn btn-sm btn-red" disabled>Button</button>
21 | 	<button type="button" class="btn btn-sm btn-green" disabled>Button</button>
22 | 	<button type="button" class="btn btn-sm btn-blue" disabled>Button</button>
23 | 
24 | 	<br><br>
25 | 
26 | 	<div class="btn-group">
27 | 		<button type="button" class="btn btn-sm btn-light">Button</button>
28 | 		<button type="button" class="btn btn-sm btn-light">Button</button>
29 | 		<button type="button" class="btn btn-sm btn-light">Button</button>
30 | 		<button type="button" class="btn btn-sm btn-light">Button</button>
31 |   </div>
32 | 
33 | 	<br><br><br><br>
34 | 
35 | 	<button type="button" class="btn btn-light">Button</button>
36 | 	<button type="button" class="btn btn-red">Button</button>
37 | 	<button type="button" class="btn btn-green">Button</button>
38 | 	<button type="button" class="btn btn-blue">Button</button>
39 | 
40 | 	<br><br>
41 | 
42 | 	<button type="button" class="btn btn-light" disabled>Button</button>
43 | 	<button type="button" class="btn btn-red" disabled>Button</button>
44 | 	<button type="button" class="btn btn-green" disabled>Button</button>
45 | 	<button type="button" class="btn btn-blue" disabled>Button</button>
46 | 
47 | 	<br><br>
48 | 
49 | 	<div class="btn-group">
50 | 		<button type="button" class="btn btn-light">Button</button>
51 | 		<button type="button" class="btn btn-light">Button</button>
52 | 		<button type="button" class="btn btn-light">Button</button>
53 | 		<button type="button" class="btn btn-light">Button</button>
54 |   </div>
55 | 
56 | 	<br><br><br><br>
57 | 
58 | 	<button type="button" class="btn btn-lg btn-light">Button</button>
59 | 	<button type="button" class="btn btn-lg btn-red">Button</button>
60 | 	<button type="button" class="btn btn-lg btn-green">Button</button>
61 | 	<button type="button" class="btn btn-lg btn-blue">Button</button>
62 | 
63 | 	<br><br>
64 | 
65 | 	<button type="button" class="btn btn-lg btn-light" disabled>Button</button>
66 | 	<button type="button" class="btn btn-lg btn-red" disabled>Button</button>
67 | 	<button type="button" class="btn btn-lg btn-green" disabled>Button</button>
68 | 	<button type="button" class="btn btn-lg btn-blue" disabled>Button</button>
69 | 
70 | 	<br><br>
71 | 
72 | 	<div class="btn-group">
73 | 		<button type="button" class="btn btn-lg btn-light">Button</button>
74 | 		<button type="button" class="btn btn-lg btn-light">Button</button>
75 | 		<button type="button" class="btn btn-lg btn-light">Button</button>
76 | 		<button type="button" class="btn btn-lg btn-light">Button</button>
77 |   </div>
78 | </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css3-patterned-buttons",
 3 |   "version": "1.0.0",
 4 |   "description": "CSS patterned buttons",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/catalinred/css3-patterned-buttons.git"
 8 |   },
 9 |   "author": "Catalin Rosu",
10 |   "license": "ISC",
11 |   "scripts": {
12 |     "scss": "node-sass -o css style.scss --output-style compressed --watch --source-map-embed false"
13 |   },
14 |   "dependencies": {
15 |     "node-sass": "^4.9.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
  1 | $black: #333;
  2 | $light: #eee;
  3 | $red: #F44336;
  4 | $green: #4CAF50;
  5 | $blue: #2196F3;
  6 | 
  7 | .btn {
  8 |   display: inline-block;
  9 |   position: relative;
 10 |   padding: 6px 20px;
 11 |   cursor: pointer;
 12 |   font-size: 1rem;
 13 |   font-weight: 500;
 14 |   text-decoration: none;
 15 |   white-space: nowrap;
 16 |   border: 1px solid;
 17 |   background-image: linear-gradient(rgba(255,255,255, .4), rgba(255,255,255,0)),
 18 |                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3' viewBox='0 0 8 8'%3E%3Cg fill='%23fff' fill-opacity='.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
 19 |   transition: background-color .2s ease-out;
 20 |   border-radius: 3px;
 21 |   box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
 22 |               0 2px 2px -1px rgba(0, 0, 0, .5),
 23 |               0 1px 0 rgba(255, 255, 255, .3) inset;
 24 | 
 25 |   &:active {
 26 |     top: 1px;
 27 |     box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
 28 |     background-image: none;
 29 |   }
 30 | 
 31 |   &[disabled] {
 32 |     cursor: default;
 33 |     position: static;
 34 |     box-shadow: none;
 35 |   }
 36 | 
 37 |   &-sm {
 38 |     padding: 4px 12px;
 39 |     font-size: .85rem;
 40 |   }
 41 | 
 42 |   &-lg {
 43 |     padding: 12px 30px;
 44 |     font-size: 1.1rem;
 45 |     text-transform: uppercase;
 46 |   }
 47 | 
 48 |   &-light {
 49 |     border-color: darken($light, 10%);
 50 |     color: $black;
 51 |     background-color: $light;
 52 | 
 53 |     &:hover {
 54 |       background-color: lighten($light, 5%);
 55 |     }
 56 | 
 57 |     &[disabled] {
 58 |       border-color: lighten($light, 5%);
 59 |       background: lighten($light, 5%);
 60 |       color: lighten($black, 30%);
 61 |     }
 62 |   }
 63 | 
 64 |   &-green {
 65 |     border-color: $green;
 66 |     color: #fff;
 67 |     background-color: $green;
 68 | 
 69 | 
 70 |     &:hover {
 71 |       background-color: lighten($green, 5%);
 72 |     }
 73 | 
 74 |     &[disabled] {
 75 |       border-color: lighten($green, 5%);
 76 |       background: lighten($green, 5%);
 77 |       color: lighten($green, 30%);
 78 |     }
 79 |   }
 80 | 
 81 |   &-red {
 82 |     border-color: $red;
 83 |     color: #fff;
 84 |     background-color: $red;
 85 | 
 86 |     &:hover {
 87 |       background-color: lighten($red, 5%);
 88 |     }
 89 | 
 90 |     &[disabled] {
 91 |       border-color: lighten($red, 5%);
 92 |       background: lighten($red, 5%);
 93 |       color: lighten($red, 30%);
 94 |     }
 95 |   }
 96 | 
 97 |   &-blue {
 98 |     border-color: $blue;
 99 |     color: #fff;
100 |     background-color: $blue;
101 | 
102 |     &:hover {
103 |       background-color: lighten($blue, 5%);
104 |     }
105 | 
106 |     &[disabled] {
107 |       border-color: lighten($blue, 5%);
108 |       background: lighten($blue, 5%);
109 |       color: lighten($blue, 30%);
110 |     }
111 |   }
112 | }
113 | 
114 | .btn-group {
115 |   display: inline-block;
116 |   vertical-align: middle;
117 |   background: rgba(0, 0, 0, .05);
118 |   border-bottom: 1px solid rgba(0, 0, 0, .08);
119 |   padding: 4px;
120 |   border-radius: 6px;
121 | }
122 | 
123 | .btn-group .btn {
124 |   float: left;
125 |   border-radius: 0;
126 | }
127 | 
128 | .btn-group .btn:active {
129 |   box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
130 |               5px 0 5px -3px rgba(0, 0, 0, .2) inset,
131 |               -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
132 | }
133 | 
134 | .btn-group .btn:first-child {
135 |   border-radius: 3px 0 0 3px;
136 | 
137 |   &:active {
138 |     box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
139 |                 -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
140 |   }
141 | }
142 | 
143 | .btn-group .btn:last-child {
144 |   border-radius: 0 3px 3px 0;
145 | 
146 |   &:active {
147 |     box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
148 |                 5px 0 5px -3px rgba(0, 0, 0, .2) inset;
149 |   }
150 | }
151 | 
152 | //
153 | // Demo
154 | //
155 | body {
156 |   background: linear-gradient(#546E7A, rgba(255, 60, 60, 0.2) 70%),
157 |               linear-gradient(-45deg, #e16a67 25%, rgba(255,211,65,0.8) 75%);
158 |   background-repeat: no-repeat;
159 |   background-attachment: fixed;
160 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
161 | }
162 | 


--------------------------------------------------------------------------------