Skip to content

Instantly share code, notes, and snippets.

@Prinzhorn

Prinzhorn/dabblet.css

Created January 25, 2012 13:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Prinzhorn/1676258 to your computer and use it in GitHub Desktop.
Save Prinzhorn/1676258 to your computer and use it in GitHub Desktop.
Download ZIP
Search form with fading search button
Raw
dabblet.css
/**
* Search form with fading search button
* https://github.com/Prinzhorn
*/
.search {
border:1px solid #444;
display:inline-block;
}
.search > input {
margin:0;
padding:.25em;
border:none;
}
.search > button {
opacity:0;
transition:opacity .5s;
}
.search > input:focus ~ button, .search > button:focus, .search > button:active {
opacity:1;
transition:opacity .5s;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="search">
<input placeholder="Search for..." />
<button>Search</button>
</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment