javascript - Invisible to Transparent HTML/CSS Button? -
ok. i'm trying re create cool looking button found. example @ http://gyazo.com/cafe378e8340d71c341b7c52857b2689 see how first invisible it's faded little bit? here version far. -> please try on this! <3
html
<button>metro 5.2</button>
css
body { background-image: url(http://p1.pichost.me/i/39/1624496.jpg); text-align: center; } button { border: 1; background: transparent; border-style: solid; border-color: #fff; border-radius: 1px; padding-left: 60px; padding-right: 60px; padding-top: 15px; padding-bottom: 15px; cursor: pointer; font-size: 1em; font-weight: 400; text-transform: uppercase; margin: 0; outline: 0; transition: .2s ease-in-out; color: #fff } button:hover { padding-left: 80px; padding-right: 80px; background-color: #bdc3c7; background: 0.4; }
index.html:
<button>metro 5.2</button>
and css .. style.css:
body { background-image: url(http://p1.pichost.me/i/39/1624496.jpg); text-align: center; } button { border: 1; background: rgba(189, 195, 199, .1); border-style: solid; border-color: #fff; border-radius: 1px; padding-left: 60px; padding-right: 60px; padding-top: 15px; padding-bottom: 15px; cursor: pointer; font-size: 1em; font-weight: 400; text-transform: uppercase; margin: 0; outline: 0; transition: .2s ease-in-out; color: #fff } button:hover { padding-left: 80px; padding-right: 80px; background-color: rgba(189, 195, 199, 1); background: 0.4; }
Comments
Post a Comment