Skip to content

Instantly share code, notes, and snippets.

@oitsjustjose
Last active March 22, 2019 21:33
Show Gist options
  • Save oitsjustjose/2917cd5535ad3549840590a8984d6d3b to your computer and use it in GitHub Desktop.
Save oitsjustjose/2917cd5535ad3549840590a8984d6d3b to your computer and use it in GitHub Desktop.
body {
background-color: #202020;
color: #DDD;
}
table,
tr,
td,
td {
border: #DDD;
}
form {
color: #DDD;
}
input {
color: #DDD;
}
#submit {
position: relative;
display: block;
margin: 30px auto;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
background-color: #00e6d2;
color: #202020;
transition: background-color .3s;
display: block;
padding: 12px 24px;
}
#submit:hover,
#submit:focus {
background-color: #00ffea;
}
#submit>* {
position: relative;
}
#submit:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
padding-top: 0;
border-radius: 100%;
background-color: rgba(236, 240, 241, .3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit:active:before {
width: 120%;
padding-top: 120%;
transition: width .2s ease-out, padding-top .2s ease-out;
}
/* Styles, not important */
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
position: relative;
height: 100%;
}
h2 {
font-weight: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment