Skip to content

Instantly share code, notes, and snippets.

@xPaw

xPaw/SteamButton.css

Last active April 22, 2018 11:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xPaw/7086322 to your computer and use it in GitHub Desktop.
Save xPaw/7086322 to your computer and use it in GitHub Desktop.
Download ZIP
"Join us on Steam" button based on Twitter's button
Raw
SteamButton.css
.steam-group-button {
font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;
height: 28px;
border-radius: 4px;
color: #FFF;
font-size: 13px;
line-height: 26px;
outline: none;
text-decoration: none;
position: relative;
font-weight: bold;
display: inline-block;
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: #333 solid 1px;
background-color: #4D4B48;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4D4B48),to(#111));
background-image: -moz-linear-gradient(top,#4D4B48,#111);
background-image: linear-gradient(top,#4D4B48,#111);
}
.steam-group-button:focus, .steam-group-button:hover, .steam-group-button:active {
color: #FFF;
border-color: #111;
background-color: #333;
background-image: -webkit-gradient(linear,left top,left bottom,from(#444),to(#111));
background-image: -moz-linear-gradient(top,#444,#111);
background-image: linear-gradient(top,#444,#111);
box-shadow: none;
}
.steam-group-button:active {
box-shadow: inset 0 3px 7px rgba(255,255,255,0.15);
}
.steam-group-icon {
width: 16px;
height: 16px;
left: 4px;
margin-top: -8px;
position: absolute;
top: 50%;
background: transparent url('//cdn.steampowered.com/favicon.ico') 0 0 no-repeat;
}
.steam-group-label {
padding: 0 7px 0 26px;
}
Raw
SteamButton.html
<!DOCTYPE html>
<html>
<head>
<title>Steam Join Group Button</title>
</head>
<body>
<a class="steam-group-button" target="_blank" href="//steamcommunity.com/groups/steamdb">
<i class="steam-group-icon"></i>
<span class="steam-group-label">Join us on Steam</span>
</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment