Skip to content

Instantly share code, notes, and snippets.

@AlexArchive
Created July 10, 2014 15:26
Show Gist options
  • Save AlexArchive/1f23bd4a7381380130e6 to your computer and use it in GitHub Desktop.
Save AlexArchive/1f23bd4a7381380130e6 to your computer and use it in GitHub Desktop.
.centered-container {
width: 800px;
height: 270px;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -135px;
position: fixed;
}
span {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 150px;
}
.flat-button {
/* reset user-agent styles */
cursor: pointer;
border: none;
background: none;
width: 100%;
/* attribution: http://codepen.io/koriolis/pen/euAEg */
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
font-size: 25px;
color: #FFF;
text-decoration: none;
margin-top: 10px;
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.flat-button:focus {
outline: none;
}
.flat-button:active {
-webkit-transform: translate(0px, 5px);
transform: translate(0px, 5px);
border-bottom: 1px solid;
}
Quip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style-sheet.css">
</head>
<body>
<div class="centered-container">
<span id="projectName"></span>
<form id="generate" action="#">
<input type="submit" value="Generate" class="animate flat-button" />
</form>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment