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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -