HTML CSS examples for CSS Widget:Button
Background for button with icon
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body { padding: 2em; } .loginBtn {<!--from w w w .j a v a 2 s. c om--> box-sizing: border-box; position: relative; margin: 0.2em; padding: 0 15px 0 46px; border: none; text-align: left; line-height: 34px; white-space: nowrap; border-radius: 0.2em; font-size: 16px; color: #FFF; } .loginBtn:before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 34px; height: 100%; } .loginBtn:focus { outline: none; } .loginBtn:active { box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1); } /* Facebook */ .loginBtn--facebook { background-color: #4C69BA; background-image: linear-gradient(#4C69BA, #3B55A0); /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/ text-shadow: 0 -1px 0 #354C8C; } .loginBtn--facebook:before { border-right: #364e92 1px solid; background: url('https://www.java2s.com/style/demo/Opera.png') 6px 6px no-repeat; } .loginBtn--facebook:hover, .loginBtn--facebook:focus { background-color: #5B7BD5; background-image: linear-gradient(#5B7BD5, #4864B1); } /* Google */ .loginBtn--google { /*font-family: "Roboto", Roboto, arial, sans-serif;*/ background: #DD4B39; } .loginBtn--google:before { border-right: #BB3F30 1px solid; background: url(https://www.java2s.com/style/demo/InternetExplorer.png) 1px 4px no-repeat; background-size: contain; } .loginBtn--google:hover, .loginBtn--google:focus { background: #E74B37; } /* Twitter */ .loginBtn--twitter { background-color: #53ADE9; background-image: linear-gradient(#53ADE9, #53ADE9); text-shadow: 0 -1px 0 #53ADE9; } .loginBtn--twitter:before { border-right: #3a90c9 1px solid; background: url('https://www.java2s.com/style/demo/InternetExplorer.png') 6px 6px no-repeat; } .loginBtn--twitter:hover, .loginBtn--twitter:focus { background-color: #70bcef; background-image: linear-gradient(#70bcef, #70bcef); } </style> </head> <body> <button class="loginBtn loginBtn--facebook"> Login with Facebook </button> <button class="loginBtn loginBtn--google"> Login with Google </button> <button class="loginBtn loginBtn--twitter">blabla!</button> </body> </html>