├── README.md ├── css ├── base.css ├── buttons.css ├── normalize.css └── vicons-font.css ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── vicons │ ├── vicons.eot │ ├── vicons.svg │ ├── vicons.ttf │ └── vicons.woff ├── img └── related │ ├── CreativeButtons.png │ └── ProgressButtonStyles.png └── index.html /README.md: -------------------------------------------------------------------------------- 1 | Button Styles Inspiration 2 | ========= 3 | 4 | Some ideas for modern and subtle button styles and effects 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=23342) 7 | 8 | [Demo](http://tympanus.net/Development/ButtonStylesInspiration/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | Icons ["Vicons"](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) by Victor Erixon. Icon font made with [IcoMoon](https://icomoon.io/app). 15 | 16 | Follow us: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 17 | 18 | [© Codrops 2015](http://www.codrops.com) 19 | 20 | 21 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600); 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 5 | font-family: 'codropsicons'; 6 | src: url("../fonts/codropsicons/codropsicons.eot"); 7 | src: url("../fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"), url("../fonts/codropsicons/codropsicons.woff") format("woff"), url("../fonts/codropsicons/codropsicons.ttf") format("truetype"), url("../fonts/codropsicons/codropsicons.svg#codropsicons") format("svg"); 8 | } 9 | *, 10 | *:after, 11 | *:before { 12 | -webkit-box-sizing: border-box; 13 | box-sizing: border-box; 14 | } 15 | .cf:before, 16 | .cf:after { 17 | content: ''; 18 | display: table; 19 | } 20 | .cf:after { 21 | clear: both; 22 | } 23 | body { 24 | background: #cfd8dc; 25 | color: #37474f; 26 | font-weight: 400; 27 | font-size: 1em; 28 | font-family: 'Raleway', Arial, sans-serif; 29 | } 30 | .support { 31 | font-weight: bold; 32 | padding: 2em 0 0 0; 33 | font-size: 1.4em; 34 | color: #ee2563; 35 | display: none; 36 | } 37 | a { 38 | color: #7986cb; 39 | text-decoration: none; 40 | outline: none; 41 | } 42 | a:hover, 43 | a:focus { 44 | color: #3f51b5; 45 | } 46 | .hidden { 47 | position: absolute; 48 | width: 0; 49 | height: 0; 50 | overflow: hidden; 51 | pointer-events: none; 52 | } 53 | .container { 54 | margin: 0 auto; 55 | text-align: center; 56 | overflow: hidden; 57 | } 58 | .content { 59 | padding: 2em 1em 5em; 60 | z-index: 1; 61 | max-width: 1000px; 62 | margin: 0 auto; 63 | } 64 | .content h2 { 65 | margin: 0 0 2em; 66 | } 67 | .content p { 68 | margin: 1em 0; 69 | padding: 0 0 2em; 70 | font-size: 0.85em; 71 | } 72 | .box { 73 | padding: 4.5em 0; 74 | display: -webkit-flex; 75 | display: -ms-flexbox; 76 | display: flex; 77 | -webkit-flex-wrap: wrap; 78 | -ms-flex-wrap: wrap; 79 | flex-wrap: wrap; 80 | -webkit-justify-content: center; 81 | justify-content: center; 82 | } 83 | 84 | /* Header */ 85 | .codrops-header { 86 | padding: 3em 190px 4em; 87 | letter-spacing: -1px; 88 | } 89 | .codrops-header h1 { 90 | font-weight: 200; 91 | font-size: 4em; 92 | line-height: 1; 93 | margin-bottom: 0; 94 | } 95 | .codrops-header h1 span { 96 | display: block; 97 | font-size: 40%; 98 | letter-spacing: 0; 99 | padding: 0.5em 0 1em 0; 100 | color: #A8B3B8; 101 | } 102 | 103 | /* Top Navigation Style */ 104 | .codrops-links { 105 | position: relative; 106 | display: inline-block; 107 | white-space: nowrap; 108 | font-size: 1.25em; 109 | text-align: center; 110 | } 111 | .codrops-links::after { 112 | position: absolute; 113 | top: 0; 114 | left: 50%; 115 | width: 1px; 116 | height: 100%; 117 | background: #BFCACF; 118 | content: ''; 119 | -webkit-transform: rotate3d(0, 0, 1, 22.5deg); 120 | transform: rotate3d(0, 0, 1, 22.5deg); 121 | } 122 | .codrops-icon { 123 | display: inline-block; 124 | margin: 0.5em; 125 | padding: 0em 0; 126 | width: 1.5em; 127 | text-decoration: none; 128 | } 129 | .codrops-icon:before { 130 | margin: 0 5px; 131 | text-transform: none; 132 | font-weight: normal; 133 | font-style: normal; 134 | font-variant: normal; 135 | font-family: 'codropsicons'; 136 | line-height: 1; 137 | speak: none; 138 | -webkit-font-smoothing: antialiased; 139 | } 140 | .codrops-icon span { 141 | display: none; 142 | } 143 | .codrops-icon--drop:before { 144 | content: "\e001"; 145 | } 146 | .codrops-icon--prev:before { 147 | content: "\e004"; 148 | } 149 | 150 | /* Related demos */ 151 | .content--related { 152 | text-align: center; 153 | font-weight: 600; 154 | } 155 | .media-item { 156 | display: inline-block; 157 | padding: 1em; 158 | margin: 1em 0 0 0; 159 | vertical-align: top; 160 | -webkit-transition: color 0.3s; 161 | transition: color 0.3s; 162 | } 163 | .media-item__img { 164 | opacity: 0.8; 165 | max-width: 100%; 166 | -webkit-transition: opacity 0.3s; 167 | transition: opacity 0.3s; 168 | } 169 | .media-item:hover .media-item__img, 170 | .media-item:focus .media-item__img { 171 | opacity: 1; 172 | } 173 | .media-item__title { 174 | font-size: 0.85em; 175 | margin: 0; 176 | padding: 0.5em; 177 | } 178 | @media screen and (max-width:50em) { 179 | .codrops-header { 180 | padding: 3em 10% 4em; 181 | } 182 | } 183 | @media screen and (max-width:40em) { 184 | .codrops-header h1 { 185 | font-size: 2.8em; 186 | } 187 | } -------------------------------------------------------------------------------- /css/buttons.css: -------------------------------------------------------------------------------- 1 | /* Box colors */ 2 | .bg-1 { 3 | background: #ECEFF1; 4 | color: #37474f; 5 | } 6 | .bg-2 { 7 | background: #7986cb; 8 | color: #ECEFF1; 9 | } 10 | .bg-3 { 11 | background: #37474f; 12 | color: #fff; 13 | } 14 | 15 | /* Common button styles */ 16 | .button { 17 | float: left; 18 | min-width: 150px; 19 | max-width: 250px; 20 | display: block; 21 | margin: 1em; 22 | padding: 1em 2em; 23 | border: none; 24 | background: none; 25 | color: inherit; 26 | vertical-align: middle; 27 | position: relative; 28 | z-index: 1; 29 | -webkit-backface-visibility: hidden; 30 | -moz-osx-font-smoothing: grayscale; 31 | } 32 | .button:focus { 33 | outline: none; 34 | } 35 | .button > span { 36 | vertical-align: middle; 37 | } 38 | 39 | /* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */ 40 | .bg-1 .button { 41 | color: #37474f; 42 | border-color: #37474f; 43 | } 44 | .bg-2 .button { 45 | color: #ECEFF1; 46 | border-color: #ECEFF1; 47 | } 48 | .bg-3 .button { 49 | color: #fff; 50 | border-color: #fff; 51 | } 52 | 53 | /* Sizes */ 54 | .button--size-s { 55 | font-size: 14px; 56 | } 57 | .button--size-m { 58 | font-size: 16px; 59 | } 60 | .button--size-l { 61 | font-size: 18px; 62 | } 63 | 64 | /* Typography and Roundedness */ 65 | .button--text-upper { 66 | letter-spacing: 2px; 67 | text-transform: uppercase; 68 | } 69 | .button--text-thin { 70 | font-weight: 300; 71 | } 72 | .button--text-medium { 73 | font-weight: 500; 74 | } 75 | .button--text-thick { 76 | font-weight: 600; 77 | } 78 | .button--round-s { 79 | border-radius: 5px; 80 | } 81 | .button--round-m { 82 | border-radius: 15px; 83 | } 84 | .button--round-l { 85 | border-radius: 40px; 86 | } 87 | 88 | /* Borders */ 89 | .button--border-thin { 90 | border: 1px solid; 91 | } 92 | .button--border-medium { 93 | border: 2px solid; 94 | } 95 | .button--border-thick { 96 | border: 3px solid; 97 | } 98 | 99 | /* Individual button styles */ 100 | 101 | /* Winona */ 102 | .button--winona { 103 | overflow: hidden; 104 | padding: 0; 105 | -webkit-transition: border-color 0.3s, background-color 0.3s; 106 | transition: border-color 0.3s, background-color 0.3s; 107 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 108 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 109 | } 110 | .button--winona::after { 111 | content: attr(data-text); 112 | position: absolute; 113 | width: 100%; 114 | height: 100%; 115 | top: 0; 116 | left: 0; 117 | opacity: 0; 118 | color: #3f51b5; 119 | -webkit-transform: translate3d(0, 25%, 0); 120 | transform: translate3d(0, 25%, 0); 121 | } 122 | .button--winona > span { 123 | display: block; 124 | } 125 | .button--winona.button--inverted { 126 | color: #7986cb; 127 | } 128 | .button--winona.button--inverted:after { 129 | color: #fff; 130 | } 131 | .button--winona::after, 132 | .button--winona > span { 133 | padding: 1em 2em; 134 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 135 | transition: transform 0.3s, opacity 0.3s; 136 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 137 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 138 | } 139 | .button--winona:hover { 140 | border-color: #3f51b5; 141 | background-color: rgba(63, 81, 181, 0.1); 142 | } 143 | .button--winona.button--inverted:hover { 144 | border-color: #21333C; 145 | background-color: #21333C; 146 | } 147 | .button--winona:hover::after { 148 | opacity: 1; 149 | -webkit-transform: translate3d(0, 0, 0); 150 | transform: translate3d(0, 0, 0); 151 | } 152 | .button--winona:hover > span { 153 | opacity: 0; 154 | -webkit-transform: translate3d(0, -25%, 0); 155 | transform: translate3d(0, -25%, 0); 156 | } 157 | 158 | /* Ujarak */ 159 | .button--ujarak { 160 | -webkit-transition: border-color 0.4s, color 0.4s; 161 | transition: border-color 0.4s, color 0.4s; 162 | } 163 | .button--ujarak::before { 164 | content: ''; 165 | position: absolute; 166 | top: 0; 167 | left: 0; 168 | width: 100%; 169 | height: 100%; 170 | background: #37474f; 171 | z-index: -1; 172 | opacity: 0; 173 | -webkit-transform: scale3d(0.7, 1, 1); 174 | transform: scale3d(0.7, 1, 1); 175 | -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; 176 | transition: transform 0.4s, opacity 0.4s; 177 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 178 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 179 | } 180 | .button--ujarak.button--round-s::before { 181 | border-radius: 2px; 182 | } 183 | .button--ujarak.button--inverted::before { 184 | background: #7986CB; 185 | } 186 | .button--ujarak, 187 | .button--ujarak::before { 188 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 189 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 190 | } 191 | .button--ujarak:hover { 192 | color: #fff; 193 | border-color: #37474f; 194 | } 195 | .button--ujarak.button--inverted:hover { 196 | color: #37474F; 197 | border-color: #fff; 198 | } 199 | .button--ujarak:hover::before { 200 | opacity: 1; 201 | -webkit-transform: translate3d(0, 0, 0); 202 | transform: translate3d(0, 0, 0); 203 | } 204 | 205 | /* Wayra */ 206 | .button--wayra { 207 | overflow: hidden; 208 | width: 245px; 209 | -webkit-transition: border-color 0.3s, color 0.3s; 210 | transition: border-color 0.3s, color 0.3s; 211 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 212 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 213 | } 214 | .button--wayra::before { 215 | content: ''; 216 | position: absolute; 217 | top: 0; 218 | left: 0; 219 | width: 150%; 220 | height: 100%; 221 | background: #37474f; 222 | z-index: -1; 223 | -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0); 224 | transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0); 225 | -webkit-transform-origin: 0% 100%; 226 | transform-origin: 0% 100%; 227 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s; 228 | transition: transform 0.3s, opacity 0.3s, background-color 0.3s; 229 | } 230 | .button--wayra:hover { 231 | color: #fff; 232 | border-color: #3f51b5; 233 | } 234 | .button--wayra.button--inverted:hover { 235 | color: #3f51b5; 236 | border-color: #fff; 237 | } 238 | .button--wayra:hover::before { 239 | opacity: 1; 240 | background-color: #3f51b5; 241 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 242 | transform: rotate3d(0, 0, 1, 0deg); 243 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 244 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 245 | } 246 | .button--wayra.button--inverted:hover::before { 247 | background-color: #fff; 248 | } 249 | 250 | /* Tamaya */ 251 | .button--tamaya { 252 | overflow: hidden; 253 | color: #7986cb; 254 | min-width: 180px; 255 | } 256 | .button--tamaya.button--inverted { 257 | color: #37474f; 258 | border-color: #37474f; 259 | } 260 | .button--tamaya::before, 261 | .button--tamaya::after { 262 | content: attr(data-text); 263 | position: absolute; 264 | width: 100%; 265 | height: 50%; 266 | left: 0; 267 | background: #7986cb; 268 | color: #fff; 269 | overflow: hidden; 270 | -webkit-transition: -webkit-transform 0.3s; 271 | transition: transform 0.3s; 272 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 273 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 274 | } 275 | .button--tamaya.button--inverted::before, 276 | .button--tamaya.button--inverted::after { 277 | background: #fff; 278 | color: #37474f; 279 | } 280 | .button--tamaya::before { 281 | top: 0; 282 | padding-top: 1em; 283 | } 284 | .button--tamaya::after { 285 | bottom: 0; 286 | line-height: 0; 287 | } 288 | .button--tamaya > span { 289 | display: block; 290 | -webkit-transform: scale3d(0.2, 0.2, 1); 291 | transform: scale3d(0.2, 0.2, 1); 292 | opacity: 0; 293 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 294 | transition: transform 0.3s, opacity 0.3s; 295 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 296 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 297 | } 298 | .button--tamaya:hover::before { 299 | -webkit-transform: translate3d(0, -100%, 0); 300 | transform: translate3d(0, -100%, 0); 301 | } 302 | .button--tamaya:hover::after { 303 | -webkit-transform: translate3d(0, 100%, 0); 304 | transform: translate3d(0, 100%, 0); 305 | } 306 | .button--tamaya:hover > span { 307 | opacity: 1; 308 | -webkit-transform: scale3d(1, 1, 1); 309 | transform: scale3d(1, 1, 1); 310 | } 311 | 312 | /* Rayen */ 313 | .button--rayen { 314 | overflow: hidden; 315 | padding: 0; 316 | width: 230px; 317 | } 318 | .button--rayen.button--inverted { 319 | color: #fff; 320 | } 321 | .button--rayen::before { 322 | content: attr(data-text); 323 | position: absolute; 324 | top: 0; 325 | left: 0; 326 | width: 100%; 327 | height: 100%; 328 | background: #7986cb; 329 | -webkit-transform: translate3d(-100%, 0, 0); 330 | transform: translate3d(-100%, 0, 0); 331 | } 332 | .button--rayen.button--inverted::before { 333 | background: #fff; 334 | color: #37474f; 335 | } 336 | .button--rayen > span { 337 | display: block; 338 | } 339 | .button--rayen::before, 340 | .button--rayen > span { 341 | padding: 1em 2em; 342 | -webkit-transition: -webkit-transform 0.3s; 343 | transition: transform 0.3s; 344 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 345 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 346 | } 347 | .button--rayen:hover::before { 348 | -webkit-transform: translate3d(0, 0, 0); 349 | transform: translate3d(0, 0, 0); 350 | } 351 | .button--rayen:hover > span { 352 | -webkit-transform: translate3d(0, 100%, 0); 353 | transform: translate3d(0, 100%, 0); 354 | } 355 | 356 | /* Pipaluk */ 357 | .button--pipaluk { 358 | width: 240px; 359 | padding: 1.5em 3em; 360 | color: #fff; 361 | } 362 | .button--pipaluk.button--inverted { 363 | color: #7986cb; 364 | } 365 | .button--pipaluk::before, 366 | .button--pipaluk::after { 367 | content: ''; 368 | border-radius: inherit; 369 | position: absolute; 370 | top: 0; 371 | left: 0; 372 | width: 100%; 373 | height: 100%; 374 | z-index: -1; 375 | -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; 376 | transition: transform 0.3s, background-color 0.3s; 377 | -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); 378 | transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); 379 | } 380 | .button--pipaluk::before { 381 | border: 2px solid #7986cb; 382 | } 383 | .button--pipaluk.button--inverted::before { 384 | border-color: #fff; 385 | } 386 | .button--pipaluk::after { 387 | background: #7986cb; 388 | } 389 | .button--pipaluk.button--inverted::after { 390 | background: #fff; 391 | } 392 | .button--pipaluk:hover::before { 393 | -webkit-transform: scale3d(1, 1, 1); 394 | transform: scale3d(1, 1, 1); 395 | } 396 | .button--pipaluk::before, 397 | .button--pipaluk:hover::after { 398 | -webkit-transform: scale3d(0.7, 0.7, 1); 399 | transform: scale3d(0.7, 0.7, 1); 400 | } 401 | .button--pipaluk:hover::after { 402 | background-color: #3f51b5; 403 | } 404 | .button--pipaluk.button--inverted:hover::after { 405 | background-color: #fff; 406 | } 407 | 408 | /* Nuka */ 409 | .button--nuka { 410 | margin: 1em 2em; 411 | -webkit-transition: color 0.3s; 412 | transition: color 0.3s; 413 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 414 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 415 | } 416 | .button--nuka.button--inverted { 417 | color: #37474f; 418 | } 419 | .button--nuka::before, 420 | .button--nuka::after { 421 | content: ''; 422 | position: absolute; 423 | border-radius: inherit; 424 | background: #7986cb; 425 | z-index: -1; 426 | } 427 | .button--nuka::before { 428 | top: -4px; 429 | bottom: -4px; 430 | left: -4px; 431 | right: -4px; 432 | opacity: 0.2; 433 | -webkit-transform: scale3d(0.7, 1, 1); 434 | transform: scale3d(0.7, 1, 1); 435 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 436 | transition: transform 0.3s, opacity 0.3s; 437 | } 438 | .button--nuka::after { 439 | top: 0; 440 | left: 0; 441 | width: 100%; 442 | height: 100%; 443 | -webkit-transform: scale3d(1.1, 1, 1); 444 | transform: scale3d(1.1, 1, 1); 445 | -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; 446 | transition: transform 0.3s, background-color 0.3s; 447 | } 448 | .button--nuka::before, 449 | .button--nuka::after { 450 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 451 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 452 | } 453 | .button--nuka.button--inverted::before, 454 | .button--nuka.button--inverted::after { 455 | background: #fff; 456 | } 457 | .button--nuka:hover { 458 | color: #fff; 459 | } 460 | .button--nuka:hover::before { 461 | opacity: 1; 462 | } 463 | .button--nuka:hover::after { 464 | background-color: #37474f; 465 | } 466 | .button--nuka.button--inverted:hover::after { 467 | background-color: #7986cb; 468 | } 469 | .button--nuka:hover::after, 470 | .button--nuka:hover::before { 471 | -webkit-transform: scale3d(1, 1, 1); 472 | transform: scale3d(1, 1, 1); 473 | } 474 | 475 | /* Moema */ 476 | .button--moema { 477 | padding: 1.5em 3em; 478 | border-radius: 50px; 479 | background: #7986cb; 480 | color: #fff; 481 | -webkit-transition: background-color 0.3s, color 0.3s; 482 | transition: background-color 0.3s, color 0.3s; 483 | } 484 | .button--moema.button--inverted { 485 | background: #ECEFF1; 486 | color: #37474f; 487 | } 488 | .button--moema::before { 489 | content: ''; 490 | position: absolute; 491 | top: -20px; 492 | left: -20px; 493 | bottom: -20px; 494 | right: -20px; 495 | background: inherit; 496 | border-radius: 50px; 497 | z-index: -1; 498 | opacity: 0.4; 499 | -webkit-transform: scale3d(0.8, 0.5, 1); 500 | transform: scale3d(0.8, 0.5, 1); 501 | } 502 | .button--moema:hover { 503 | -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s; 504 | transition: background-color 0.1s 0.3s, color 0.1s 0.3s; 505 | color: #ECEFF1; 506 | background-color: #3f51b5; 507 | -webkit-animation: anim-moema-1 0.3s forwards; 508 | animation: anim-moema-1 0.3s forwards; 509 | } 510 | .button--moema.button--inverted:hover { 511 | color: #ECEFF1; 512 | background-color: #7986cb; 513 | } 514 | .button--moema:hover::before { 515 | -webkit-animation: anim-moema-2 0.3s 0.3s forwards; 516 | animation: anim-moema-2 0.3s 0.3s forwards; 517 | } 518 | @-webkit-keyframes anim-moema-1 { 519 | 60% { 520 | -webkit-transform: scale3d(0.8, 0.8, 1); 521 | transform: scale3d(0.8, 0.8, 1); 522 | } 523 | 85% { 524 | -webkit-transform: scale3d(1.1, 1.1, 1); 525 | transform: scale3d(1.1, 1.1, 1); 526 | } 527 | 100% { 528 | -webkit-transform: scale3d(1, 1, 1); 529 | transform: scale3d(1, 1, 1); 530 | } 531 | } 532 | @keyframes anim-moema-1 { 533 | 60% { 534 | -webkit-transform: scale3d(0.8, 0.8, 1); 535 | transform: scale3d(0.8, 0.8, 1); 536 | } 537 | 85% { 538 | -webkit-transform: scale3d(1.1, 1.1, 1); 539 | transform: scale3d(1.1, 1.1, 1); 540 | } 541 | 100% { 542 | -webkit-transform: scale3d(1, 1, 1); 543 | transform: scale3d(1, 1, 1); 544 | } 545 | } 546 | @-webkit-keyframes anim-moema-2 { 547 | to { 548 | opacity: 0; 549 | -webkit-transform: scale3d(1, 1, 1); 550 | transform: scale3d(1, 1, 1); 551 | } 552 | } 553 | @keyframes anim-moema-2 { 554 | to { 555 | opacity: 0; 556 | -webkit-transform: scale3d(1, 1, 1); 557 | transform: scale3d(1, 1, 1); 558 | } 559 | } 560 | 561 | /* Isi */ 562 | .button--isi { 563 | padding: 1.2em 2em; 564 | color: #fff; 565 | background: #7986cb; 566 | overflow: hidden; 567 | } 568 | .button--isi::before { 569 | content: ''; 570 | z-index: -1; 571 | position: absolute; 572 | top: 50%; 573 | left: 100%; 574 | margin: -15px 0 0 1px; 575 | width: 30px; 576 | height: 30px; 577 | border-radius: 50%; 578 | background: #3f51b5; 579 | -webkit-transform-origin: 100% 50%; 580 | transform-origin: 100% 50%; 581 | -webkit-transform: scale3d(1, 2, 1); 582 | transform: scale3d(1, 2, 1); 583 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 584 | transition: transform 0.3s, opacity 0.3s; 585 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.9,1); 586 | transition-timing-function: cubic-bezier(0.7,0,0.9,1); 587 | } 588 | .button--isi .button__icon { 589 | vertical-align: middle; 590 | } 591 | .button--isi > span { 592 | vertical-align: middle; 593 | padding-left: 0.75em; 594 | } 595 | .button--isi:hover::before { 596 | -webkit-transform: scale3d(9, 9, 1); 597 | transform: scale3d(9, 9, 1); 598 | } 599 | 600 | /* Aylen */ 601 | .button.button--aylen { 602 | background: #fff; 603 | color: #37474f; 604 | overflow: hidden; 605 | -webkit-transition: color 0.3s; 606 | transition: color 0.3s; 607 | } 608 | .button--aylen.button--inverted { 609 | background: none; 610 | color: #fff; 611 | } 612 | .button--aylen::before, 613 | .button--aylen::after { 614 | content: ''; 615 | position: absolute; 616 | height: 100%; 617 | width: 100%; 618 | bottom: 100%; 619 | left: 0; 620 | z-index: -1; 621 | -webkit-transition: -webkit-transform 0.3s; 622 | transition: transform 0.3s; 623 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 624 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 625 | } 626 | .button--aylen::before { 627 | background: #7986cb; 628 | } 629 | .button--aylen::after { 630 | background: #3f51b5; 631 | } 632 | .button--aylen:hover { 633 | color: #fff; 634 | } 635 | .button--aylen:hover::before, 636 | .button--aylen:hover::after { 637 | -webkit-transform: translate3d(0, 100%, 0); 638 | transform: translate3d(0, 100%, 0); 639 | } 640 | .button--aylen:hover::after { 641 | -webkit-transition-delay: 0.175s; 642 | transition-delay: 0.175s; 643 | } 644 | 645 | /* Saqui */ 646 | .button.button--saqui { 647 | overflow: hidden; 648 | color: #fff; 649 | background: #37474f; 650 | -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in; 651 | transition: background-color 0.3s ease-in, color 0.3s ease-in; 652 | } 653 | .button--saqui.button--inverted { 654 | background: #fff; 655 | color: #37474f; 656 | } 657 | .button--saqui::after { 658 | content: attr(data-text); 659 | position: absolute; 660 | top: 0; 661 | left: 0; 662 | width: 100%; 663 | height: 100%; 664 | padding: 1em 2em; 665 | color: #37474f; 666 | -webkit-transform-origin: -25% 50%; 667 | transform-origin: -25% 50%; 668 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 669 | transform: rotate3d(0, 0, 1, 45deg); 670 | -webkit-transition: -webkit-transform 0.3s ease-in; 671 | transition: transform 0.3s ease-in; 672 | } 673 | .button--saqui.button--inverted::after { 674 | color: #fff; 675 | } 676 | .button--saqui:hover::after, 677 | .button--saqui:hover { 678 | -webkit-transition-timing-function: ease-out; 679 | transition-timing-function: ease-out; 680 | } 681 | .button--saqui:hover { 682 | background-color: #7986cb; 683 | color: #7986cb; 684 | } 685 | .button--saqui.button--inverted:hover { 686 | background-color: #3f51b5; 687 | color: #3f51b5; 688 | } 689 | .button--saqui:hover::after { 690 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 691 | transform: rotate3d(0, 0, 1, 0deg); 692 | } 693 | 694 | /* Wapasha */ 695 | .button.button--wapasha { 696 | background: #37474f; 697 | color: #fff; 698 | -webkit-transition: background-color 0.3s, color 0.3s; 699 | transition: background-color 0.3s, color 0.3s; 700 | } 701 | .button--wapasha.button--inverted { 702 | background: #fff; 703 | color: #37474f; 704 | } 705 | .button--wapasha::before { 706 | content: ''; 707 | position: absolute; 708 | top: 0; 709 | left: 0; 710 | width: 100%; 711 | height: 100%; 712 | border: 2px solid #3f51b5; 713 | z-index: -1; 714 | border-radius: inherit; 715 | opacity: 0; 716 | -webkit-transform: scale3d(0.6, 0.6, 1); 717 | transform: scale3d(0.6, 0.6, 1); 718 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 719 | transition: transform 0.3s, opacity 0.3s; 720 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 721 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 722 | } 723 | .button--wapasha.button--inverted::before { 724 | border-color: #7986cb; 725 | } 726 | .button--wapasha:hover { 727 | background-color: #fff; 728 | color: #3f51b5; 729 | } 730 | .button--wapasha.button--inverted:hover { 731 | background-color: #37474f; 732 | color: #7986cb; 733 | } 734 | .button--wapasha:hover::before { 735 | -webkit-transform: scale3d(1, 1, 1); 736 | transform: scale3d(1, 1, 1); 737 | opacity: 1; 738 | } 739 | 740 | /* Nina */ 741 | .button--nina { 742 | padding: 0 2em; 743 | background: #7986cb; 744 | color: #fff; 745 | overflow: hidden; 746 | -webkit-transition: background-color 0.3s; 747 | transition: background-color 0.3s; 748 | } 749 | .button--nina.button--inverted { 750 | background: #fff; 751 | color: #7986cb; 752 | } 753 | .button--nina > span { 754 | display: inline-block; 755 | padding: 1em 0; 756 | opacity: 0; 757 | color: #fff; 758 | -webkit-transform: translate3d(0, -10px, 0); 759 | transform: translate3d(0, -10px, 0); 760 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 761 | transition: transform 0.3s, opacity 0.3s; 762 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 763 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 764 | } 765 | .button--nina::before { 766 | content: attr(data-text); 767 | position: absolute; 768 | top: 0; 769 | left: 0; 770 | width: 100%; 771 | height: 100%; 772 | padding: 1em 0; 773 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 774 | transition: transform 0.3s, opacity 0.3s; 775 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 776 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 777 | } 778 | .button--nina:hover { 779 | background-color: #3f51b5; 780 | } 781 | .button--nina:hover::before { 782 | opacity: 0; 783 | -webkit-transform: translate3d(0, 100%, 0); 784 | transform: translate3d(0, 100%, 0); 785 | } 786 | .button--nina:hover > span { 787 | opacity: 1; 788 | -webkit-transform: translate3d(0, 0, 0); 789 | transform: translate3d(0, 0, 0); 790 | } 791 | .button--nina:hover > span:nth-child(1) { 792 | -webkit-transition-delay: 0.045s; 793 | transition-delay: 0.045s; 794 | } 795 | .button--nina:hover > span:nth-child(2) { 796 | -webkit-transition-delay: 0.09s; 797 | transition-delay: 0.09s; 798 | } 799 | .button--nina:hover > span:nth-child(3) { 800 | -webkit-transition-delay: 0.135s; 801 | transition-delay: 0.135s; 802 | } 803 | .button--nina:hover > span:nth-child(4) { 804 | -webkit-transition-delay: 0.18s; 805 | transition-delay: 0.18s; 806 | } 807 | .button--nina:hover > span:nth-child(5) { 808 | -webkit-transition-delay: 0.225s; 809 | transition-delay: 0.225s; 810 | } 811 | .button--nina:hover > span:nth-child(6) { 812 | -webkit-transition-delay: 0.27s; 813 | transition-delay: 0.27s; 814 | } 815 | .button--nina:hover > span:nth-child(7) { 816 | -webkit-transition-delay: 0.315s; 817 | transition-delay: 0.315s; 818 | } 819 | .button--nina:hover > span:nth-child(8) { 820 | -webkit-transition-delay: 0.36s; 821 | transition-delay: 0.36s; 822 | } 823 | .button--nina:hover > span:nth-child(9) { 824 | -webkit-transition-delay: 0.405s; 825 | transition-delay: 0.405s; 826 | } 827 | .button--nina:hover > span:nth-child(10) { 828 | -webkit-transition-delay: 0.45s; 829 | transition-delay: 0.45s; 830 | } 831 | 832 | /* Nanuk */ 833 | .button--nanuk { 834 | padding: 0 2em; 835 | overflow: hidden; 836 | background: #7986cb; 837 | -webkit-transition: background-color 0.3s; 838 | transition: background-color 0.3s; 839 | } 840 | .button--nanuk.button--inverted { 841 | background: #fff; 842 | color: #7986cb; 843 | } 844 | .button--nanuk > span { 845 | display: inline-block; 846 | padding: 1em 0; 847 | } 848 | .button--nanuk:hover { 849 | background-color: #3f51b5; 850 | } 851 | .button--nanuk:hover > span:nth-child(odd) { 852 | -webkit-animation: anim-nanuk-1 0.5s forwards; 853 | animation: anim-nanuk-1 0.5s forwards; 854 | } 855 | .button--nanuk:hover > span:nth-child(even) { 856 | -webkit-animation: anim-nanuk-2 0.5s forwards; 857 | animation: anim-nanuk-2 0.5s forwards; 858 | } 859 | .button--nanuk:hover > span:nth-child(odd), 860 | .button--nanuk:hover > span:nth-child(even) { 861 | -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 862 | transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1); 863 | } 864 | @-webkit-keyframes anim-nanuk-1 { 865 | 0%, 866 | 100% { 867 | opacity: 1; 868 | -webkit-transform: translate3d(0, 0, 0); 869 | transform: translate3d(0, 0, 0); 870 | } 871 | 49% { 872 | opacity: 1; 873 | -webkit-transform: translate3d(0, 100%, 0); 874 | transform: translate3d(0, 100%, 0); 875 | } 876 | 50% { 877 | opacity: 0; 878 | -webkit-transform: translate3d(0, 100%, 0); 879 | transform: translate3d(0, 100%, 0); 880 | color: inherit; 881 | } 882 | 51% { 883 | opacity: 0; 884 | -webkit-transform: translate3d(0, -100%, 0); 885 | transform: translate3d(0, -100%, 0); 886 | color: #fff; 887 | } 888 | 100% { 889 | color: #fff; 890 | } 891 | } 892 | @keyframes anim-nanuk-1 { 893 | 0%, 894 | 100% { 895 | opacity: 1; 896 | -webkit-transform: translate3d(0, 0, 0); 897 | transform: translate3d(0, 0, 0); 898 | } 899 | 49% { 900 | opacity: 1; 901 | -webkit-transform: translate3d(0, 100%, 0); 902 | transform: translate3d(0, 100%, 0); 903 | } 904 | 50% { 905 | opacity: 0; 906 | -webkit-transform: translate3d(0, 100%, 0); 907 | transform: translate3d(0, 100%, 0); 908 | color: inherit; 909 | } 910 | 51% { 911 | opacity: 0; 912 | -webkit-transform: translate3d(0, -100%, 0); 913 | transform: translate3d(0, -100%, 0); 914 | color: #fff; 915 | } 916 | 100% { 917 | color: #fff; 918 | } 919 | } 920 | @-webkit-keyframes anim-nanuk-2 { 921 | 0%, 922 | 100% { 923 | opacity: 1; 924 | -webkit-transform: translate3d(0, 0, 0); 925 | transform: translate3d(0, 0, 0); 926 | } 927 | 49% { 928 | opacity: 1; 929 | -webkit-transform: translate3d(0, -100%, 0); 930 | transform: translate3d(0, -100%, 0); 931 | } 932 | 50% { 933 | opacity: 0; 934 | -webkit-transform: translate3d(0, -100%, 0); 935 | transform: translate3d(0, -100%, 0); 936 | color: inherit; 937 | } 938 | 51% { 939 | opacity: 0; 940 | -webkit-transform: translate3d(0, 100%, 0); 941 | transform: translate3d(0, 100%, 0); 942 | color: #fff; 943 | } 944 | 100% { 945 | color: #fff; 946 | } 947 | } 948 | @keyframes anim-nanuk-2 { 949 | 0%, 950 | 100% { 951 | opacity: 1; 952 | -webkit-transform: translate3d(0, 0, 0); 953 | transform: translate3d(0, 0, 0); 954 | } 955 | 49% { 956 | opacity: 1; 957 | -webkit-transform: translate3d(0, -100%, 0); 958 | transform: translate3d(0, -100%, 0); 959 | } 960 | 50% { 961 | opacity: 0; 962 | -webkit-transform: translate3d(0, -100%, 0); 963 | transform: translate3d(0, -100%, 0); 964 | color: inherit; 965 | } 966 | 51% { 967 | opacity: 0; 968 | -webkit-transform: translate3d(0, 100%, 0); 969 | transform: translate3d(0, 100%, 0); 970 | color: #fff; 971 | } 972 | 100% { 973 | color: #fff; 974 | } 975 | } 976 | .button--nanuk:hover > span:nth-child(1) { 977 | -webkit-animation-delay: 0s; 978 | animation-delay: 0s; 979 | } 980 | .button--nanuk:hover > span:nth-child(2) { 981 | -webkit-animation-delay: 0.05s; 982 | animation-delay: 0.05s; 983 | } 984 | .button--nanuk:hover > span:nth-child(3) { 985 | -webkit-animation-delay: 0.1s; 986 | animation-delay: 0.1s; 987 | } 988 | .button--nanuk:hover > span:nth-child(4) { 989 | -webkit-animation-delay: 0.15s; 990 | animation-delay: 0.15s; 991 | } 992 | .button--nanuk:hover > span:nth-child(5) { 993 | -webkit-animation-delay: 0.2s; 994 | animation-delay: 0.2s; 995 | } 996 | .button--nanuk:hover > span:nth-child(6) { 997 | -webkit-animation-delay: 0.25s; 998 | animation-delay: 0.25s; 999 | } 1000 | .button--nanuk:hover > span:nth-child(7) { 1001 | -webkit-animation-delay: 0.3s; 1002 | animation-delay: 0.3s; 1003 | } 1004 | .button--nanuk:hover > span:nth-child(8) { 1005 | -webkit-animation-delay: 0.35s; 1006 | animation-delay: 0.35s; 1007 | } 1008 | .button--nanuk:hover > span:nth-child(9) { 1009 | -webkit-animation-delay: 0.4s; 1010 | animation-delay: 0.4s; 1011 | } 1012 | .button--nanuk:hover > span:nth-child(10) { 1013 | -webkit-animation-delay: 0.45s; 1014 | animation-delay: 0.45s; 1015 | } 1016 | .button--nanuk:hover > span:nth-child(11) { 1017 | -webkit-animation-delay: 0.5s; 1018 | animation-delay: 0.5s; 1019 | } 1020 | 1021 | /* Antiman */ 1022 | .button--antiman { 1023 | background: none; 1024 | border: none; 1025 | height: 60px; 1026 | } 1027 | .button--antiman.button--inverted, 1028 | .button--antiman.button--inverted-alt { 1029 | -webkit-transition: color 0.3s; 1030 | transition: color 0.3s; 1031 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1032 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1033 | } 1034 | .button--antiman > span { 1035 | padding-left: 0.35em; 1036 | } 1037 | .button--antiman::before, 1038 | .button--antiman::after { 1039 | content: ''; 1040 | z-index: -1; 1041 | border-radius: inherit; 1042 | pointer-events: none; 1043 | position: absolute; 1044 | top: 0; 1045 | left: 0; 1046 | width: 100%; 1047 | height: 100%; 1048 | -webkit-backface-visibility: hidden; 1049 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 1050 | transition: transform 0.3s, opacity 0.3s; 1051 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1052 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1053 | } 1054 | .button--antiman::before { 1055 | border: 2px solid #37474f; 1056 | opacity: 0; 1057 | -webkit-transform: scale3d(1.2, 1.2, 1); 1058 | transform: scale3d(1.2, 1.2, 1); 1059 | } 1060 | .button--antiman.button--border-thin::before { 1061 | border-width: 1px; 1062 | } 1063 | .button--antiman.button--border-medium::before { 1064 | border-width: 2px; 1065 | } 1066 | .button--antiman.button--border-thick::before { 1067 | border-width: 3px; 1068 | } 1069 | .button--antiman.button--inverted::before { 1070 | border-color: #7986cb; 1071 | } 1072 | .button--antiman.button--inverted-alt::before { 1073 | border-color: #3f51b5; 1074 | } 1075 | .button--antiman::after { 1076 | background: #fff; 1077 | } 1078 | .button--antiman.button--inverted::after { 1079 | background: #7986cb; 1080 | } 1081 | .button--antiman.button--inverted-alt::after { 1082 | background: #3f51b5; 1083 | } 1084 | .button--antiman.button--inverted:hover { 1085 | color: #7986cb; 1086 | } 1087 | .button--antiman.button--inverted-alt:hover { 1088 | color: #3f51b5; 1089 | } 1090 | .button--antiman:hover::before { 1091 | opacity: 1; 1092 | -webkit-transform: scale3d(1, 1, 1); 1093 | transform: scale3d(1, 1, 1); 1094 | } 1095 | .button--antiman:hover::after { 1096 | opacity: 0; 1097 | -webkit-transform: scale3d(0.8, 0.8, 1); 1098 | transform: scale3d(0.8, 0.8, 1); 1099 | } 1100 | 1101 | /* Itzel */ 1102 | .button--itzel { 1103 | border: none; 1104 | padding: 0px; 1105 | overflow: hidden; 1106 | width: 255px; 1107 | } 1108 | .button--itzel::before { 1109 | content: ''; 1110 | position: absolute; 1111 | top: 0; 1112 | left: 0; 1113 | width: 100%; 1114 | height: 100%; 1115 | border: 2px solid; 1116 | border-radius: inherit; 1117 | -webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%); 1118 | clip-path: url(../index.html#clipBox); 1119 | -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); 1120 | transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); 1121 | -webkit-transform-origin: 50% 100%; 1122 | transform-origin: 50% 100%; 1123 | } 1124 | 1125 | .button--itzel.button--border-thin::before { 1126 | border: 1px solid; 1127 | -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0); 1128 | transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0); 1129 | } 1130 | .button--itzel.button--border-thick::before { 1131 | border: 3px solid; 1132 | -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0); 1133 | transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0); 1134 | } 1135 | 1136 | .button--itzel::before, 1137 | .button--itzel .button__icon { 1138 | -webkit-transition: -webkit-transform 0.3s; 1139 | transition: transform 0.3s; 1140 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1141 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1142 | } 1143 | .button--itzel .button__icon { 1144 | position: absolute; 1145 | top: 100%; 1146 | left: 50%; 1147 | padding: 20px; 1148 | font-size: 20px; 1149 | -webkit-transform: translate3d(-50%, 0, 0); 1150 | transform: translate3d(-50%, 0, 0); 1151 | } 1152 | .button--itzel > span { 1153 | display: block; 1154 | padding: 20px; 1155 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 1156 | transition: transform 0.3s, opacity 0.3s; 1157 | -webkit-transition-delay: 0.3s; 1158 | transition-delay: 0.3s; 1159 | } 1160 | .button--itzel:hover::before { 1161 | -webkit-transform: translate3d(0, 0, 0); 1162 | transform: translate3d(0, 0, 0); 1163 | } 1164 | .button--itzel:hover .button__icon { 1165 | -webkit-transition-delay: 0.1s; 1166 | transition-delay: 0.1s; 1167 | -webkit-transform: translate3d(-50%, -100%, 0); 1168 | transform: translate3d(-50%, -100%, 0); 1169 | } 1170 | .button--itzel:hover > span { 1171 | opacity: 0; 1172 | -webkit-transform: translate3d(0, -50%, 0); 1173 | transform: translate3d(0, -50%, 0); 1174 | -webkit-transition-delay: 0s; 1175 | transition-delay: 0s; 1176 | } 1177 | 1178 | /* Naira */ 1179 | .button--naira { 1180 | padding: 0; 1181 | overflow: hidden; 1182 | -webkit-transition: background-color 0.3s; 1183 | transition: background-color 0.3s; 1184 | } 1185 | .button--naira::before { 1186 | content: ''; 1187 | position: absolute; 1188 | left: -50%; 1189 | width: 200%; 1190 | height: 200%; 1191 | background: #37474f; 1192 | top: -50%; 1193 | z-index: -1; 1194 | -webkit-transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg); 1195 | transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg); 1196 | } 1197 | .button--naira.button--inverted::before { 1198 | background: #7986cb; 1199 | } 1200 | .button--naira-up::before { 1201 | -webkit-transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg); 1202 | transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg); 1203 | } 1204 | .button--naira > span { 1205 | display: block; 1206 | } 1207 | .button--naira .button__icon { 1208 | position: absolute; 1209 | top: 0; 1210 | width: 100%; 1211 | left: 0; 1212 | color: #fff; 1213 | -webkit-transform: translate3d(0, -100%, 0); 1214 | transform: translate3d(0, -100%, 0); 1215 | } 1216 | .button--naira-up .button__icon { 1217 | -webkit-transform: translate3d(0, 100%, 0); 1218 | transform: translate3d(0, 100%, 0); 1219 | } 1220 | .button--naira > span, 1221 | .button--naira .button__icon { 1222 | padding: 1em 2em; 1223 | -webkit-transition: -webkit-transform 0.3s; 1224 | transition: transform 0.3s; 1225 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1226 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1227 | } 1228 | .button--naira:hover::before { 1229 | -webkit-animation: anim-naira-1 0.3s forwards ease-in; 1230 | animation: anim-naira-1 0.3s forwards ease-in; 1231 | } 1232 | .button--naira-up:hover::before { 1233 | -webkit-animation: anim-naira-2 0.3s forwards ease-in; 1234 | animation: anim-naira-2 0.3s forwards ease-in; 1235 | } 1236 | @-webkit-keyframes anim-naira-1 { 1237 | 50% { 1238 | -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg); 1239 | transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg); 1240 | -webkit-animation-timing-function: ease-out; 1241 | animation-timing-function: ease-out; 1242 | } 1243 | 100% { 1244 | -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1245 | transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1246 | } 1247 | } 1248 | @keyframes anim-naira-1 { 1249 | 50% { 1250 | -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg); 1251 | transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg); 1252 | -webkit-animation-timing-function: ease-out; 1253 | animation-timing-function: ease-out; 1254 | } 1255 | 100% { 1256 | -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1257 | transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1258 | } 1259 | } 1260 | @-webkit-keyframes anim-naira-2 { 1261 | 50% { 1262 | -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg); 1263 | transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg); 1264 | -webkit-animation-timing-function: ease-out; 1265 | animation-timing-function: ease-out; 1266 | } 1267 | 100% { 1268 | -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1269 | transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1270 | } 1271 | } 1272 | @keyframes anim-naira-2 { 1273 | 50% { 1274 | -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg); 1275 | transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg); 1276 | -webkit-animation-timing-function: ease-out; 1277 | animation-timing-function: ease-out; 1278 | } 1279 | 100% { 1280 | -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1281 | transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg); 1282 | } 1283 | } 1284 | .button--naira:hover { 1285 | background-color: #37474f; 1286 | -webkit-transition: background-color 0s 0.3s; 1287 | transition: background-color 0s 0.3s; 1288 | } 1289 | .button--naira.button--inverted:hover { 1290 | background-color: #7986cb; 1291 | } 1292 | .button--naira:hover .button__icon { 1293 | -webkit-transform: translate3d(0, 0, 0); 1294 | transform: translate3d(0, 0, 0); 1295 | } 1296 | .button--naira:hover > span { 1297 | opacity: 0; 1298 | -webkit-transform: translate3d(0, 100%, 0); 1299 | transform: translate3d(0, 100%, 0); 1300 | } 1301 | .button--naira-up:hover > span { 1302 | -webkit-transform: translate3d(0, -100%, 0); 1303 | transform: translate3d(0, -100%, 0); 1304 | } 1305 | 1306 | /* Quidel */ 1307 | .button--quidel { 1308 | background: #7986cb; 1309 | color: #7986cb; 1310 | overflow: hidden; 1311 | -webkit-transition: color 0.3s; 1312 | transition: color 0.3s; 1313 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1314 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1315 | } 1316 | .button--quidel.button--inverted { 1317 | background: #fff; 1318 | color: #fff; 1319 | } 1320 | .button--quidel::before, 1321 | .button--quidel::after { 1322 | content: ''; 1323 | position: absolute; 1324 | z-index: -1; 1325 | border-radius: inherit; 1326 | } 1327 | .button--quidel::after { 1328 | top: 2px; 1329 | left: 2px; 1330 | right: 2px; 1331 | bottom: 2px; 1332 | background: #fff; 1333 | } 1334 | .button--quidel.button--inverted::after { 1335 | background: #37474f; 1336 | } 1337 | .button--quidel::before { 1338 | background: #37474f; 1339 | top: 0; 1340 | left: 0; 1341 | width: 100%; 1342 | height: 100%; 1343 | -webkit-transform: translate3d(0, 100%, 0); 1344 | transform: translate3d(0, 100%, 0); 1345 | -webkit-transition: -webkit-transform 0.3s; 1346 | transition: transform 0.3s; 1347 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1348 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1349 | } 1350 | .button--quidel.button--inverted::before { 1351 | background: #7986cb; 1352 | } 1353 | .button--round-s.button--quidel::after { 1354 | border-radius: 3px; 1355 | } 1356 | .button--round-m.button--quidel::after { 1357 | border-radius: 13px; 1358 | } 1359 | .button--round-l.button--quidel::after { 1360 | border-radius: 40px; 1361 | } 1362 | .button--quidel > span { 1363 | padding-left: 0.35em; 1364 | } 1365 | .button--quidel:hover { 1366 | color: #37474f; 1367 | } 1368 | .button--quidel.button--inverted:hover { 1369 | color: #7986cb; 1370 | } 1371 | .button--quidel:hover::before { 1372 | -webkit-transform: translate3d(0, 0, 0); 1373 | transform: translate3d(0, 0, 0); 1374 | } 1375 | 1376 | /* Sacnite */ 1377 | .button.button--sacnite { 1378 | width: 70px; 1379 | height: 70px; 1380 | min-width: 0; 1381 | padding: 0; 1382 | color: #fff; 1383 | -webkit-transition: color 0.3s; 1384 | transition: color 0.3s; 1385 | } 1386 | .button--scanite.button--round-l { 1387 | border-radius: 50%; 1388 | } 1389 | .button--sacnite.button--inverted { 1390 | color: #37474f; 1391 | } 1392 | .button--sacnite::before { 1393 | content: ''; 1394 | position: absolute; 1395 | top: 0; 1396 | left: 0; 1397 | width: 100%; 1398 | height: 100%; 1399 | border-radius: inherit; 1400 | z-index: -1; 1401 | box-shadow: inset 0 0 0 35px #37474f; 1402 | -webkit-transform: scale3d(0.9, 0.9, 1); 1403 | transform: scale3d(0.9, 0.9, 1); 1404 | -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3; 1405 | transition: box-shadow 0.3s, transform 0.3s; 1406 | } 1407 | .button--sacnite.button--inverted::before { 1408 | box-shadow: inset 0 0 0 35px #fff; 1409 | } 1410 | .button--sacnite .button__icon { 1411 | font-size: 22px; 1412 | width: 22px; 1413 | } 1414 | .button--sacnite > span { 1415 | position: absolute; 1416 | opacity: 0; 1417 | pointer-events: none; 1418 | } 1419 | .button--sacnite:hover { 1420 | color: #37474f; 1421 | } 1422 | .button--sacnite.button--inverted:hover { 1423 | color: #fff; 1424 | } 1425 | .button--sacnite:hover::before { 1426 | box-shadow: inset 0 0 0 2px #37474f; 1427 | -webkit-transform: scale3d(1, 1, 1); 1428 | transform: scale3d(1, 1, 1); 1429 | } 1430 | .button--sacnite.button--inverted:hover::before { 1431 | box-shadow: inset 0 0 0 2px #fff; 1432 | } 1433 | 1434 | /* Shikoba */ 1435 | .button.button--shikoba { 1436 | padding: 1em 30px 1em 50px; 1437 | overflow: hidden; 1438 | background: #fff; 1439 | color: #37474f; 1440 | border-color: #37474f; 1441 | -webkit-transition: background-color 0.3s, border-color 0.3s, color 0.3s; 1442 | transition: background-color 0.3s, border-color 0.3s, color 0.3s; 1443 | } 1444 | .button--shikoba.button--inverted { 1445 | color: #fff; 1446 | background: #7986cb; 1447 | } 1448 | .button--shikoba > span { 1449 | display: inline-block; 1450 | -webkit-transform: translate3d(-10px, 0, 0); 1451 | transform: translate3d(-10px, 0, 0); 1452 | -webkit-transition: -webkit-transform 0.3s; 1453 | transition: transform 0.3s; 1454 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1455 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1456 | } 1457 | .button--shikoba .button__icon { 1458 | position: absolute; 1459 | left: 20px; 1460 | font-size: 18px; 1461 | -webkit-transform: translate3d(-40px, 2.5em, 0); 1462 | transform: translate3d(-40px, 2.5em, 0); 1463 | -webkit-transition: -webkit-transform 0.3s; 1464 | transition: transform 0.3s; 1465 | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1466 | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); 1467 | } 1468 | .button--shikoba:hover .button__icon, 1469 | .button--shikoba:hover > span { 1470 | -webkit-transform: translate3d(0, 0, 0); 1471 | transform: translate3d(0, 0, 0); 1472 | } 1473 | .button--shikoba:hover { 1474 | background: #3f51b5; 1475 | border-color: #3f51b5; 1476 | color: #fff; 1477 | } 1478 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /css/vicons-font.css: -------------------------------------------------------------------------------- 1 | @font-face { font-family: 'vicons'; font-weight: normal; font-style: normal; src: url('../fonts/vicons/vicons.eot?1u5j7r'); src: url('../fonts/vicons/vicons.eot?#iefix1u5j7r') format('embedded-opentype'), url('../fonts/vicons/vicons.woff?1u5j7r') format('woff'), url('../fonts/vicons/vicons.ttf?1u5j7r') format('truetype'), url('../fonts/vicons/vicons.svg?1u5j7r#vicons') format('svg'); } 2 | .icon { font-family: 'vicons'; font-size: inherit; font-weight: normal; font-style: normal; line-height: inherit; position: relative; display: inline-block; transform: translate(0, 0); vertical-align: middle; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 3 | .icon::before { display: inline-block; width: 100%; } 4 | .icon-box:before { content: '\e600'; } 5 | .icon-write:before { content: '\e601'; } 6 | .icon-clock:before { content: '\e602'; } 7 | .icon-reply:before { content: '\e603'; } 8 | .icon-reply-all:before { content: '\e604'; } 9 | .icon-forward:before { content: '\e605'; } 10 | .icon-flag:before { content: '\e606'; } 11 | .icon-search:before { content: '\e607'; } 12 | .icon-trash:before { content: '\e608'; } 13 | .icon-envelope:before { content: '\e609'; } 14 | .icon-bubble:before { content: '\e60a'; } 15 | .icon-bubbles:before { content: '\e60b'; } 16 | .icon-user:before { content: '\e60c'; } 17 | .icon-users:before { content: '\e60d'; } 18 | .icon-cloud:before { content: '\e60e'; } 19 | .icon-download:before { content: '\e60f'; } 20 | .icon-upload:before { content: '\e610'; } 21 | .icon-rain:before { content: '\e611'; } 22 | .icon-sun:before { content: '\e612'; } 23 | .icon-moon:before { content: '\e613'; } 24 | .icon-bell:before { content: '\e614'; } 25 | .icon-folder:before { content: '\e615'; } 26 | .icon-pin:before { content: '\e616'; } 27 | .icon-sound:before { content: '\e617'; } 28 | .icon-microphone:before { content: '\e618'; } 29 | .icon-camera:before { content: '\e619'; } 30 | .icon-image:before { content: '\e61a'; } 31 | .icon-cog:before { content: '\e61b'; } 32 | .icon-calendar:before { content: '\e61c'; } 33 | .icon-book:before { content: '\e61d'; } 34 | .icon-map-marker:before { content: '\e61e'; } 35 | .icon-store:before { content: '\e61f'; } 36 | .icon-support:before { content: '\e620'; } 37 | .icon-tag:before { content: '\e621'; } 38 | .icon-heart:before { content: '\e622'; } 39 | .icon-video-camera:before { content: '\e623'; } 40 | .icon-trophy:before { content: '\e624'; } 41 | .icon-cart:before { content: '\e625'; } 42 | .icon-eye:before { content: '\e626'; } 43 | .icon-cancel:before { content: '\e627'; } 44 | .icon-chart:before { content: '\e628'; } 45 | .icon-target:before { content: '\e629'; } 46 | .icon-printer:before { content: '\e62a'; } 47 | .icon-location:before { content: '\e62b'; } 48 | .icon-bookmark:before { content: '\e62c'; } 49 | .icon-monitor:before { content: '\e62d'; } 50 | .icon-cross:before { content: '\e62e'; } 51 | .icon-plus:before { content: '\e62f'; } 52 | .icon-left:before { content: '\e630'; } 53 | .icon-up:before { content: '\e631'; } 54 | .icon-browser:before { content: '\e632'; } 55 | .icon-windows:before { content: '\e633'; } 56 | .icon-switch:before { content: '\e634'; } 57 | .icon-dashboard:before { content: '\e635'; } 58 | .icon-play:before { content: '\e636'; } 59 | .icon-fast-forward:before { content: '\e637'; } 60 | .icon-next:before { content: '\e638'; } 61 | .icon-refresh:before { content: '\e639'; } 62 | .icon-film:before { content: '\e63a'; } 63 | .icon-home:before { content: '\e63b'; } -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/vicons/vicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/fonts/vicons/vicons.eot -------------------------------------------------------------------------------- /fonts/vicons/vicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /fonts/vicons/vicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/fonts/vicons/vicons.ttf -------------------------------------------------------------------------------- /fonts/vicons/vicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/fonts/vicons/vicons.woff -------------------------------------------------------------------------------- /img/related/CreativeButtons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/img/related/CreativeButtons.png -------------------------------------------------------------------------------- /img/related/ProgressButtonStyles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonStylesInspiration/c5c92baed93810b3b131e4b140ed2474779ef62c/img/related/ProgressButtonStyles.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Styles Inspiration 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 |
23 |

Button Styles Inspiration Some fresh styles & hover effects for the modern button

24 |
25 | Previous Demo 26 | Back to the Codrops article 27 |
28 |
Please note that (mobile) Safari's behavior is very buggy and only some effects will work properly.
29 |
30 |
31 |

Winona

32 |
33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | 46 |
47 |
48 |
49 |

Ujarak

50 |
51 | 52 | 53 | 54 |
55 |
56 | 57 | 58 | 59 |
60 |
61 | 62 | 63 | 64 |
65 |
66 |
67 |

Wayra

68 |
69 | 70 | 71 | 72 |
73 |
74 | 75 | 76 | 77 |
78 |
79 | 80 | 81 | 82 |
83 |
84 |
85 |

Tamaya

86 |
87 | 88 | 89 | 90 |
91 |
92 | 93 | 94 | 95 |
96 |
97 | 98 | 99 | 100 |
101 |
102 |
103 |

Rayen

104 |
105 | 106 | 107 | 108 |
109 |
110 | 111 | 112 | 113 |
114 |
115 | 116 | 117 | 118 |
119 |
120 |
121 |

Pipaluk

122 |
123 | 124 | 125 | 126 |
127 |
128 | 129 | 130 | 131 |
132 |
133 | 134 | 135 | 136 |
137 |
138 |
139 |

Moema

140 |

Based on the "Add New Location" button concept by Charles Patterson. Better as a click effect than on hover.

141 |
142 | 143 | 144 | 145 |
146 |
147 | 148 | 149 | 150 |
151 |
152 | 153 | 154 | 155 |
156 |
157 |
158 |

Isi

159 |
160 | 161 | 162 | 163 |
164 |
165 | 166 | 167 | 168 |
169 |
170 | 171 | 172 | 173 |
174 |
175 |
176 |

Aylen

177 |
178 | 179 | 180 | 181 |
182 |
183 | 184 | 185 | 186 |
187 |
188 | 189 | 190 | 191 |
192 |
193 |
194 |

Saqui

195 |
196 | 197 | 198 | 199 |
200 |
201 | 202 | 203 | 204 |
205 |
206 | 207 | 208 | 209 |
210 |
211 |
212 |

Wapasha

213 |
214 | 215 | 216 | 217 |
218 |
219 | 220 | 221 | 222 |
223 |
224 | 225 | 226 | 227 |
228 |
229 |
230 |

Nina

231 |
232 | 235 | 238 | 241 |
242 |
243 | 246 | 249 | 252 |
253 |
254 | 257 | 260 | 263 |
264 |
265 |
266 |

Nanuk

267 |
268 | 271 | 274 | 277 |
278 |
279 | 282 | 285 | 288 |
289 |
290 | 293 | 296 | 299 |
300 |
301 |
302 |

Nuka

303 |
304 | 305 | 306 | 307 |
308 |
309 | 310 | 311 | 312 |
313 |
314 | 315 | 316 | 317 |
318 |
319 |
320 |

Antiman

321 |
322 | 323 | 324 | 325 |
326 |
327 | 328 | 329 | 330 |
331 |
332 | 333 | 334 | 335 |
336 |
337 |
338 |

Itzel

339 | 346 |
347 | 348 | 349 | 350 |
351 |
352 | 353 | 354 | 355 |
356 |
357 | 358 | 359 | 360 |
361 |

clip-path does not work in IE, so you'll see the line under the icon.

362 |
363 |
364 |

Naira

365 |
366 | 367 | 368 |
369 |
370 | 371 | 372 |
373 |
374 | 375 | 376 |
377 |
378 |
379 |

Quidel

380 |
381 | 382 | 383 | 384 |
385 |
386 | 387 | 388 | 389 |
390 |
391 | 392 | 393 | 394 |
395 |
396 |
397 |

Sacnite

398 |
399 | 400 | 401 | 402 |
403 |
404 | 405 | 406 | 407 |
408 |
409 | 410 | 411 | 412 |
413 |
414 |
415 |

Shikoba

416 |

Based on Portfolio Update! by Dennis Flinsenberg

417 |
418 | 419 | 420 | 421 |
422 |
423 | 424 | 425 | 426 |
427 |
428 | 429 | 430 | 431 |
432 |
433 | 434 |
435 |

Icons "Vicons" by Victor Erixon. Icon font made with IcoMoon.

436 |

If you enjoyed this demo you might also like:

437 | 438 | 439 |

Creative Button Styles

440 | 441 | 442 | 443 |

Progress Button Styles

444 | 445 |
446 |
447 | 455 | 456 | 457 | --------------------------------------------------------------------------------