fix
Matt Wing
Ran into @enjoycss today and made an awesome button in like 30 seconds. Check it out if you hate coding CSS like me!
Proceed(9)
Thanks for your like.
You've done it, haven't you?
{"sid":"zFP","rid":1,"page":"code","page_params":[],"username":"colton.vandusen"}
Skip
Next

We'll add only required prefixes
for browsers you gonna choose,
based on data from caniuse.com
4+
4+
9+
10.5+
4+
5.0+
2.1+
7+
Hide default rules
Copy to clipboard
HTML
<input class="input" placeholder="" />
Copy to clipboard
CSS
LESS
SCSS
.input {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 7px 10px;
  border: 1px solid #B6C0CD;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 14px/normal Arial, Helvetica, sans-serif;
  color: #465160;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-90deg, rgba(255,255,255,1) 0, #f2f2f2 100%);
  background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0, #f2f2f2 100%);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0, #f2f2f2 100%);
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.input:hover {
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2) ;
  box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.input:focus {
  border: 1px solid #40528E;
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 1px 1px 3px 0 rgba(64,82,142,0.7) ;
  box-shadow: 1px 1px 3px 0 rgba(64,82,142,0.7) ;
}