Skip to content

Instantly share code, notes, and snippets.

@blaja

blaja/.html

Last active August 29, 2015 14:26
Show Gist options
  • Save blaja/11a62fd0bdb9c8a9ef16 to your computer and use it in GitHub Desktop.
Save blaja/11a62fd0bdb9c8a9ef16 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body {height: 100vh;display: flex;align-items: center;justify-content: center;}
/* Button component - works only in FF correctly ATM */
.btn {
--font: bold 100%/1.5 arial;
--bg: #0092d2;
--color: #fefefe;
--padding: 1rem;
--border: 0;
--radius: 1rem;
--cursor: pointer;
--offset: 5rem;
--outline: 2px solid gold;
--transition: outline-offset 400ms linear;
font: var(--font);
background-color: var(--bg);
color: var(--color);
padding: calc(var(--padding) / 2) var(--padding);
border: var(--border);
border-radius: var(--radius) / calc(var(--radius) / 4);
outline-offset: var(--offset);
outline: 2px solid transparent;
-moz-outline-radius: var(--radius) / calc(var(--radius) /2);
transition: var(--transition);
}
.btn:hover, .btn:focus {
cursor: var(--cursor);
outline-offset: 0;
outline: var(--outline);
background-color: #00d291;
}
</style>
</head>
<body>
<button class="btn">Subscribe</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment