Botones CSS3

Botones Clasicos

Este es el conjunto original de los botones, que muestra una gran variedad de estilos CSS3 en diferentes combinaciones. Estudie el código, y luego ajustar para adaptarse al contexto de donde se utiliza.

    Mostrar Codigo

    /* minimal */ button.minimal { background: #e3e3e3; border: 1px solid #bbb; border-radius: 3px; -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6; box-shadow: inset 0 0 1px 1px #f6f6f6; color: #333; font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif; padding: 8px 0 9px; text-align: center; text-shadow: 0 1px 0 #fff; width: 150px; } button.minimal:hover { background: #d9d9d9; -webkit-box-shadow: inset 0 0 1px 1px #eaeaea; box-shadow: inset 0 0 1px 1px #eaeaea; color: #222; cursor: pointer; } button.minimal:active { background: #d0d0d0; -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3; box-shadow: inset 0 0 1px 1px #e3e3e3; color: #000; }

    Mostrar Codigo

    /* clean gray */ button.clean-gray { background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(top, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; border-radius: 3px; color: #333; font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; padding: 8px 0; text-align: center; text-shadow: 0 1px 0 #eee; width: 150px; } button.clean-gray:hover { background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb)); background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); background-image: linear-gradient(top, #dddddd, #bbbbbb); border: 1px solid #bbb; border-bottom: 1px solid #999; cursor: pointer; text-shadow: 0 1px 0 #ddd; } button.clean-gray:active { border: 1px solid #aaa; border-bottom: 1px solid #888; -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; } /*

    Mostrar Codigo

    /* cupid green (inspired by okcupid.com) */ button.cupid-green { background-color: #7fbf4d; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f)); background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f); background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f); background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f); background-image: -o-linear-gradient(top, #7fbf4d, #63a62f); background-image: linear-gradient(top, #7fbf4d, #63a62f); border: 1px solid #63a62f; border-bottom: 1px solid #5b992b; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 0 #96ca6d; box-shadow: inset 0 1px 0 0 #96ca6d; color: #fff; font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; padding: 7px 0 8px 0; text-align: center; text-shadow: 0 -1px 0 #4c9021; width: 150px; } button.cupid-green:hover { background-color: #76b347; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e)); background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e); background-image: -moz-linear-gradient(top, #76b347, #5e9e2e); background-image: -ms-linear-gradient(top, #76b347, #5e9e2e); background-image: -o-linear-gradient(top, #76b347, #5e9e2e); background-image: linear-gradient(top, #76b347, #5e9e2e); -webkit-box-shadow: inset 0 1px 0 0 #8dbf67; box-shadow: inset 0 1px 0 0 #8dbf67; cursor: pointer; } button.cupid-green:active { border: 1px solid #5b992b; border-bottom: 1px solid #538c27; -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; } /*

    Mostrar Codigo

    /* cupid blue (inspired by okcupid.com) */ button.cupid-blue { background-color: #d7e5f5; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5)); background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5); background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5); background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5); background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5); background-image: linear-gradient(top, #d7e5f5, #cbe0f5); border-top: 1px solid #abbbcc; border-left: 1px solid #a7b6c7; border-bottom: 1px solid #a1afbf; border-right: 1px solid #a7b6c7; border-radius: 12px; -webkit-box-shadow: inset 0 1px 0 0 white; box-shadow: inset 0 1px 0 0 white; color: #1a3e66; font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; padding: 6px 0 7px 0; text-align: center; text-shadow: 0 1px 1px #fff; width: 150px; } button.cupid-blue:hover { background-color: #ccd9e8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8)); background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8); background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8); background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8); background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8); background-image: linear-gradient(top, #ccd9e8, #c1d4e8); border-top: 1px solid #a1afbf; border-left: 1px solid #9caaba; border-bottom: 1px solid #96a3b3; border-right: 1px solid #9caaba; -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2; box-shadow: inset 0 1px 0 0 #f2f2f2; color: #163659; cursor: pointer; } button.cupid-blue:active { border: 1px solid #8c98a7; -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; }

    Mostrar Codigo

    /* blue pill (inspired by iTunes) */ button.blue-pill { background-color: #a5b8da; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3)); background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3); background-image: -moz-linear-gradient(top, #a5b8da, #7089b3); background-image: -ms-linear-gradient(top, #a5b8da, #7089b3); background-image: -o-linear-gradient(top, #a5b8da, #7089b3); background-image: linear-gradient(top, #a5b8da, #7089b3); border-top: 1px solid #758fba; border-right: 1px solid #6c84ab; border-bottom: 1px solid #5c6f91; border-left: 1px solid #6c84ab; border-radius: 18px; -webkit-box-shadow: inset 0 1px 0 0 #aec3e5; box-shadow: inset 0 1px 0 0 #aec3e5; color: #fff; font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; padding: 8px 0; text-align: center; text-shadow: 0 -1px 1px #64799e; text-transform: uppercase; width: 150px; } button.blue-pill:hover { background-color: #9badcc; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9badcc), color-stop(100%, #687fa6)); background-image: -webkit-linear-gradient(top, #9badcc, #687fa6); background-image: -moz-linear-gradient(top, #9badcc, #687fa6); background-image: -ms-linear-gradient(top, #9badcc, #687fa6); background-image: -o-linear-gradient(top, #9badcc, #687fa6); background-image: linear-gradient(top, #9badcc, #687fa6); border-top: 1px solid #6d86ad; border-right: 1px solid #647a9e; border-bottom: 1px solid #546685; border-left: 1px solid #647a9e; -webkit-box-shadow: inset 0 1px 0 0 #a5b9d9; box-shadow: inset 0 1px 0 0 #a5b9d9; cursor: pointer; } button.blue-pill:active { border: 1px solid #546685; -webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }

    Mostrar Codigo

    /* thoughtbot (inspired by thoughtbot.com) */ button.thoughtbot { background-color: #ee432e; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100)); background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); border: 1px solid #951100; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; color: #fff; font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif; padding: 12px 0 14px 0; text-align: center; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); width: 150px; } button.thoughtbot:hover { background-color: #f37873; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601)); background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); cursor: pointer; } button.thoughtbot:active { background-color: #d43c28; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00)); background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4); }

    Mostrar Codigo

    /* punch */ button.punch { background: #4162a8; border-top: 1px solid #38538c; border-right: 1px solid #1f2d4d; border-bottom: 1px solid #151e33; border-left: 1px solid #1f2d4d; border-radius: 4px; -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111; color: #fff; font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 10px; padding: 10px 0 12px 0; text-align: center; text-shadow: 0 -1px 1px #1e2d4d; width: 150px; -webkit-background-clip: padding-box; } button.punch:hover { -webkit-box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111; box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111; cursor: pointer; } button.punch:active { -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; margin-top: 58px; }

    Mostrar Codigo

    /* purple candy */ button.purple-candy { background-color: #9e76e8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9e76e8), color-stop(50%, #7038e0), color-stop(50%, #6021de), color-stop(100%, #6224de)); background-image: -webkit-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); background-image: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); background-image: -ms-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); background-image: -o-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); background-image: linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); border-radius: 3px; color: #fff; font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif; padding: 10px 0 12px 0; text-align: center; text-shadow: 0 -1px 1px #473569; width: 150px; -webkit-background-clip: padding-box; } button.purple-candy:hover { background-color: #8d69cf; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8d69cf), color-stop(50%, #6332c7), color-stop(50%, #551dc4), color-stop(100%, #561fc4)); background-image: -webkit-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); background-image: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); background-image: -ms-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); background-image: -o-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); background-image: linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); -webkit-background-clip: padding-box; cursor: pointer; } button.purple-candy:active { background: #4a1aab; background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%); background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab)); color: #ddd; -webkit-background-clip: padding-box; }

    Mostrar Codigo

    /* shiny blue (inspired by rdio iphone interface) */ button.shiny-blue { background-color: #759ae9; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de)); background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); border-top: 1px solid #1f58cc; border-right: 1px solid #1b4db3; border-bottom: 1px solid #174299; border-left: 1px solid #1b4db3; border-radius: 4px; -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); color: #fff; font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif; padding: 7px 0; text-shadow: 0 -1px 1px #1a5ad9; width: 150px; } button.shiny-blue:hover { background-color: #5d89e8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d89e8), color-stop(50%, #2261e0), color-stop(50%, #044bd9), color-stop(100%, #0d53de)); background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); cursor: pointer; } button.shiny-blue:active { border-top: 1px solid #1b4db3; border-right: 1px solid #174299; border-bottom: 1px solid #133780; border-left: 1px solid #174299; -webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; }

    Mostrar Codigo

    /* download itunes I wrote a blog post about creating this button: http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss */ button.download-itunes { background-color: #52a8e8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0)); background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0); background-image: -moz-linear-gradient(top, #52a8e8, #377ad0); background-image: -ms-linear-gradient(top, #52a8e8, #377ad0); background-image: -o-linear-gradient(top, #52a8e8, #377ad0); background-image: linear-gradient(top, #52a8e8, #377ad0); border-top: 1px solid #4081af; border-right: 1px solid #2e69a3; border-bottom: 1px solid #20559a; border-left: 1px solid #2e69a3; border-radius: 16px; -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3; box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3; color: #fff; font: normal 11px/1 "lucida grande", sans-serif; padding: 3px 5px; text-align: center; text-shadow: 0 -1px 1px #3275bc; width: 112px; -webkit-background-clip: padding-box; } button.download-itunes:hover { background-color: #3e9ee5; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb)); background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%); border-top: 1px solid #2a73a6; border-right: 1px solid #165899; border-bottom: 1px solid #07428f; border-left: 1px solid #165899; -webkit-box-shadow: inset 0 1px 0 0 #62b1e9; box-shadow: inset 0 1px 0 0 #62b1e9; cursor: pointer; text-shadow: 0 -1px 1px #1d62ab; -webkit-background-clip: padding-box; } button.download-itunes:active { background: #3282d3; border: 1px solid #154c8c; border-bottom: 1px solid #0e408e; -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white; box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white; text-shadow: 0 -1px 1px #2361a4; -webkit-background-clip: padding-box; } button[disabled].download-itunes, button[disabled].download-itunes:hover, button[disabled].download-itunes:active { background-color: #dadada; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dadada), color-stop(100%, #f3f3f3)); background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3); background-image: -moz-linear-gradient(top, #dadada, #f3f3f3); background-image: -ms-linear-gradient(top, #dadada, #f3f3f3); background-image: -o-linear-gradient(top, #dadada, #f3f3f3); background-image: linear-gradient(top, #dadada, #f3f3f3); border-top: 1px solid #c5c5c5; border-right: 1px solid #cecece; border-bottom: 1px solid #d9d9d9; border-left: 1px solid #cecece; -webkit-box-shadow: none; box-shadow: none; color: #8f8f8f; cursor: not-allowed; text-shadow: 0 -1px 1px #ebebeb; } button.download-itunes::-moz-focus-inner { border: 0; padding: 0; }

    Mostrar Codigo

    /* skip (inspired by okcupid iphone interface) */ button.skip { background-color: #8c9cbf; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8c9cbf), color-stop(50%, #546a9e), color-stop(50%, #36518f), color-stop(100%, #3d5691)); background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); border: 1px solid #172d6e; border-bottom: 1px solid #0e1d45; border-radius: 5px; -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb; box-shadow: inset 0 1px 0 0 #b1b9cb; color: #fff; font: bold 16px/1 "helvetica neue", helvetica, arial, sans-serif; padding: 7px 0 8px 0; text-decoration: none; text-align: center; text-shadow: 0 -1px 1px #000f4d; width: 150px; } button.skip:hover { background-color: #7f8dad; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8dad), color-stop(50%, #4a5e8c), color-stop(50%, #2f477d), color-stop(100%, #364c80)); background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); cursor: pointer; } button.skip:active { -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; }

    Mostrar Codigo

    /* minimal indent (inspired by okcupid iphone interface) */ div.indent { background-color: #e2e2e2; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(100%, #fafafa)); background-image: -webkit-linear-gradient(top, #e2e2e2, #fafafa); background-image: -moz-linear-gradient(top, #e2e2e2, #fafafa); background-image: -ms-linear-gradient(top, #e2e2e2, #fafafa); background-image: -o-linear-gradient(top, #e2e2e2, #fafafa); background-image: linear-gradient(top, #e2e2e2, #fafafa); border-bottom: 1px solid #e7e7e7; border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-top: 1px solid #dfdfdf; border-radius: 8px; margin: 50px auto 0; padding: 10px 0; width: 170px; } button.minimal-indent { background-color: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(50%, #dddddd), color-stop(50%, #d2d2d2), color-stop(100%, #dfdfdf)); background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); background-image: -moz-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); background-image: -ms-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); background-image: -o-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); background-image: linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); border-right: 1px solid #dfdfdf; border-bottom: 1px solid #b4b4b4; border-right: 1px solid #dfdfdf; border-radius: 5px; -webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef; box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef; color: #666; font: bold 16px/1 "helvetica neue", helvetica, arial, sans-serif; margin: 0; padding: 7px 0; text-shadow: 0 1px 1px #fff; width: 150px; } button.minimal-indent:hover { background-color: #e5e5e5; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(50%, #d1d1d1), color-stop(50%, #c4c4c4), color-stop(100%, #b8b8b8)); background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); background-image: -moz-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); background-image: -ms-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); background-image: -o-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); background-image: linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; cursor: pointer; } button.minimal-indent:active { -webkit-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; }

WebKit experimental

La prueba de concepto utilizando botones de funciones en WebKit solamente.

    Mostrar Codigo

    /* webkit badge */ button.webkit-badge { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100)); color: #fff; font: lighter italic 30px/1 "hoefler text", georgia, serif; height: 88px; padding: 0; text-align: center; text-shadow: 0 -1px 1px #3d0700; width: 150px; -webkit-mask-image: url("images/badge.png"); -webkit-mask-position: left top; -webkit-mask-repeat: no-repeat; } button.webkit-badge:hover { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601)); cursor: pointer; } button.webkit-badge:active { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00)); }

    Mostrar Codigo

    /* webkit seal */ button.webkit-seal { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(1, #6224de)); color: #fff; height: 90px; color: #fff; font: bold 13px/1 "helvetica neue", helvetica, arial, sans-serif; padding: 0; text-align: center; text-shadow: 0 -1px 1px #473569; width: 150px; -webkit-mask-image: url("images/seal.png"); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; } button.webkit-seal:hover { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(1, #561fc4)); cursor: pointer; } button.webkit-seal:active { background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab)); }

    Mostrar Codigo

    /* webkit check */ button.webkit-check { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(1, #2463de)); color: #fff; height: 88px; padding: 0; text-align: center; text-indent: -9999px; text-shadow: 0 -1px 1px #3d0700; width: 150px; -webkit-mask-image: url("images/check.png"); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; } button.webkit-check:hover { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(1, #1d55c4)); cursor: pointer; } button.webkit-check:active { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab)); }



  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-07-27
  • Categorias: Noticias Tutorial Diseño Web plugin html5 Html jQuery WebSite webmasters tutoriales en linea articulos post noticias