Skip to content

Instantly share code, notes, and snippets.

@RobertAKARobin

RobertAKARobin/offset.html

Created January 5, 2016 16:36
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 RobertAKARobin/ae5751814c9ec14d3f1e to your computer and use it in GitHub Desktop.
Save RobertAKARobin/ae5751814c9ec14d3f1e to your computer and use it in GitHub Desktop.
Download ZIP
Weird button vertical offset
Raw
offset.html
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<style>
*{
margin:0;
padding:0;
border:0;
border-collapse:collapse;
border-spacing:0;
font-size:inherit;
font-style:inherit;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight:inherit;
text-decoration:none;
color:inherit;
background-color:transparent;
list-style-type:none;
}
button,
.button,
input[type=submit]{
cursor:pointer;
padding:10px;
margin-bottom:10px;
box-sizing:border-box;
border-radius:5px;
background-color:#eee;
line-height:24px;
height:48px;
display:inline-block;
width:auto;
vertical-align:middle;
text-transform:uppercase;
letter-spacing:2px;
background-color:#69c;
color:#fff;
font-weight:bold;
text-align:center;
cursor:pointer;
font-size:10px;
border-bottom:0;
transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
button:hover,
.button:hover,
input[type=submit]:hover{
background-color:#7ad;
}
</style>
</head>
<body>
<button>Foo</button>
<button>Bar</button>
<a class="button">Baz</a>
<input type="submit" value="Yar" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment