├── .gitignore ├── README.md ├── css ├── estilos.css ├── estilos.sass └── variables.sass ├── estilos.css ├── img └── thumb.jpg └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | estilos.css.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Radio Buttons y Checkbox Personalizados con estilo Material Design 2 | 3 | ![Thumb](https://raw.githubusercontent.com/falconmasters/custom_radio_checkbox/master/img/thumb.jpg) 4 | 5 | Demo: http://codepen.io/falconmasters/pen/GppJOw 6 | 7 | ### Tutorial: [http://www.falconmasters.com/](http://www.falconmasters.com) 8 | 9 | Por [Carlos Arturo](http://www.twitter.com/falconmasters) 10 | ## [FalconMasters, Blog de Diseño y Desarrollo Web](http://www.falconmasters.com) 11 | 12 | --- -------------------------------------------------------------------------------- /css/estilos.css: -------------------------------------------------------------------------------- 1 | /* ----- ----- ----- ----- */ 2 | * { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; } 8 | 9 | body { 10 | font-size: 16px; 11 | background: #fff; 12 | font-family: "Roboto"; } 13 | 14 | a { 15 | color: #FF4136; } 16 | 17 | .wrap { 18 | width: 90%; 19 | max-width: 1000px; 20 | margin: auto; } 21 | 22 | .info { 23 | text-align: center; 24 | padding: 20px; 25 | color: #001F3F; 26 | border-bottom: 1px solid #ccc; } 27 | .info p { 28 | margin-top: 20px; } 29 | 30 | .formulario { 31 | /* --------------------------------------- */ 32 | /* ----- Radio Button */ 33 | /* --------------------------------------- */ 34 | /* --------------------------------------- */ 35 | /* ----- Checkbox */ 36 | /* --------------------------------------- */ } 37 | .formulario h2 { 38 | font-size: 16px; 39 | color: #001F3F; 40 | margin-bottom: 20px; 41 | margin-left: 20px; } 42 | .formulario > div { 43 | padding: 20px 0; 44 | border-bottom: 1px solid #ccc; } 45 | .formulario .radio label, 46 | .formulario .checkbox label { 47 | display: inline-block; 48 | cursor: pointer; 49 | color: #FF4136; 50 | position: relative; 51 | padding: 5px 15px 5px 51px; 52 | font-size: 1em; 53 | border-radius: 5px; 54 | -webkit-transition: all 0.3s ease; 55 | -o-transition: all 0.3s ease; 56 | transition: all 0.3s ease; } 57 | .formulario .radio label:hover, 58 | .formulario .checkbox label:hover { 59 | background: rgba(255, 65, 54, 0.1); } 60 | .formulario .radio label:before, 61 | .formulario .checkbox label:before { 62 | content: ""; 63 | display: inline-block; 64 | width: 17px; 65 | height: 17px; 66 | position: absolute; 67 | left: 15px; 68 | border-radius: 50%; 69 | background: none; 70 | border: 3px solid #FF4136; } 71 | .formulario input[type="radio"] { 72 | display: none; } 73 | .formulario input[type="radio"]:checked + label:before { 74 | display: none; } 75 | .formulario input[type="radio"]:checked + label { 76 | padding: 5px 15px; 77 | background: #FF4136; 78 | border-radius: 2px; 79 | color: #fff; } 80 | .formulario .checkbox label:before { 81 | border-radius: 3px; } 82 | .formulario .checkbox input[type="checkbox"] { 83 | display: none; } 84 | .formulario .checkbox input[type="checkbox"]:checked + label:before { 85 | display: none; } 86 | .formulario .checkbox input[type="checkbox"]:checked + label { 87 | background: #FF4136; 88 | color: #fff; 89 | padding: 5px 15px; } 90 | 91 | /*# sourceMappingURL=estilos.css.map */ 92 | -------------------------------------------------------------------------------- /css/estilos.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | * 4 | -webkit-box-sizing: border-box 5 | -moz-box-sizing: border-box 6 | box-sizing: border-box 7 | margin: 0 8 | padding: 0 9 | 10 | body 11 | font-size: 16px 12 | background: $white 13 | font-family: "Roboto" 14 | 15 | a 16 | color: $primario 17 | 18 | .wrap 19 | width: 90% 20 | max-width: 1000px 21 | margin: auto 22 | 23 | .info 24 | text-align: center 25 | padding: 20px 26 | color: $titular 27 | border-bottom: 1px solid #ccc 28 | p 29 | margin-top: 20px 30 | 31 | .formulario 32 | h2 33 | font-size: 16px 34 | color: $titular 35 | margin-bottom: 20px 36 | margin-left: 20px 37 | > div 38 | padding: 20px 0 39 | border-bottom: 1px solid #ccc 40 | .radio label, 41 | .checkbox label 42 | display: inline-block 43 | cursor: pointer 44 | color: $primario 45 | position: relative 46 | padding: 5px 15px 5px 51px 47 | font-size: 1em 48 | border-radius: 5px 49 | -webkit-transition: all .3s ease 50 | -o-transition: all .3s ease 51 | transition: all .3s ease 52 | &:hover 53 | background: rgba($primario, .1) 54 | &:before 55 | content: "" 56 | display: inline-block 57 | 58 | width: 17px 59 | height: 17px 60 | position: absolute 61 | 62 | left: 15px 63 | 64 | border-radius: 50% 65 | background: none 66 | border: 3px solid $primario 67 | 68 | /* --------------------------------------- */ 69 | /* ----- Radio Button */ 70 | /* --------------------------------------- */ 71 | input[type="radio"] 72 | display: none 73 | &:checked + label:before 74 | display: none 75 | &:checked + label 76 | padding: 5px 15px 77 | background: $primario 78 | border-radius: 2px 79 | color: #fff 80 | 81 | /* --------------------------------------- */ 82 | /* ----- Checkbox */ 83 | /* --------------------------------------- */ 84 | .checkbox 85 | label:before 86 | border-radius: 3px 87 | input[type="checkbox"] 88 | display: none 89 | &:checked + label:before 90 | display: none 91 | &:checked + label 92 | background: $primario 93 | color: #fff 94 | padding: 5px 15px -------------------------------------------------------------------------------- /css/variables.sass: -------------------------------------------------------------------------------- 1 | // Colores: 2 | $aqua: #7FDBFF 3 | $blue: #0074D9 4 | $navy: #001F3F 5 | $teal: #39CCCC 6 | $green: #2ECC40 7 | $olive: #3D9970 8 | $lime: #01FF70 9 | // Warm 10 | $yellow: #FFDC00 11 | $orange: #FF851B 12 | $red: #FF4136 13 | $fuchsia: #F012BE 14 | $purple: #B10DC9 15 | $maroon: #85144B 16 | // Gray Scale 17 | $white: #fff 18 | $silver: #ddd 19 | $gray: #aaa 20 | $black: #111 21 | 22 | /* ----- ----- ----- ----- */ 23 | $primario: $red 24 | $titular: $navy -------------------------------------------------------------------------------- /estilos.css: -------------------------------------------------------------------------------- 1 | /* 2 | Errno::ENOENT: No such file or directory @ rb_sysopen - estilos.sass 3 | 4 | Backtrace: 5 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/plugin/compiler.rb:482:in `read' 6 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/plugin/compiler.rb:482:in `update_stylesheet' 7 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets' 8 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/plugin/compiler.rb:209:in `each' 9 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/plugin/compiler.rb:209:in `update_stylesheets' 10 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/plugin/compiler.rb:293:in `watch' 11 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/plugin.rb:108:in `method_missing' 12 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/exec/sass_scss.rb:384:in `watch_or_update' 13 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/exec/sass_scss.rb:51:in `process_result' 14 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/exec/base.rb:52:in `parse' 15 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/lib/sass/exec/base.rb:19:in `parse!' 16 | C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4.15/bin/sass:13:in `' 17 | C:/Ruby22-x64/bin/sass:23:in `load' 18 | C:/Ruby22-x64/bin/sass:23:in `
' 19 | */ 20 | body:before { 21 | white-space: pre; 22 | font-family: monospace; 23 | content: "Errno::ENOENT: No such file or directory @ rb_sysopen - estilos.sass"; } 24 | -------------------------------------------------------------------------------- /img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/custom_radio_checkbox/20beb4877ae14a16b1262c053a93189f05e8d826/img/thumb.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Custom Radio Buttons y Checkboxes 9 | 10 | 11 |
12 |
13 |

Radio Buttons y Checkbox Personalizados

14 |

Y Animados :D

15 |

Por: Carlos Arturo - FalconMasters

16 |
17 |
18 |
19 |

Radio Buttons

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 |

Checkboxines :D

32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 | 41 | --------------------------------------------------------------------------------