Skip to content

Instantly share code, notes, and snippets.

@agarie

agarie/index.html

Created May 6, 2012 03:55
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save agarie/2610520 to your computer and use it in GitHub Desktop.
Save agarie/2610520 to your computer and use it in GitHub Desktop.
Download ZIP
CSS buttons for pokémon types.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pok&eacute;mon Buttons for each type</title>
<link rel="stylesheet" type="text/css" href="./types.css" />
</head>
<body>
<div class='container'>
<span class="type normal left">normal</span>
<span class="type fire left">fire</span>
<span class="type water left">water</span>
<span class="type electric left">electric</span>
<span class="type grass left">grass</span>
<span class="type ice left">ice</span>
<span class="type ground left">ground</span>
<span class="type flying left">flying</span>
<span class="type ghost left">ghost</span>
<span class="type rock left">rock</span>
<span class="type fighting left">fighting</span>
<span class="type poison left">poison</span>
<span class="type psychic left">psychic</span>
<span class="type bug left">bug</span>
<span class="type dark left">dark</span>
<span class="type steel left">steel</span>
<span class="type dragon left">dragon</span>
<span class="type left">???</span>
<div class="clear"></div>
<h2>Some examples:</h2>
<p>Type: <span class="type fire">Fire</span> / <span class="type water">Water</span></p>
</div>
</body>
</html>
Raw
types.css
.container {
width: 700px;
min-width: 300px;
max-width: 1100px;
margin: 0 auto;
padding: 40px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background-color: #DFDFDF;
}
.left {
float: left;
}
.clear {
clear: both;
}
.type {
margin: 10px;
padding: 5px 8px 5px 8px;
display: inline-block;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
font-size: 13px;
font-family: "helvetica neue", Helvetica, Verdana, sans-serif;
color: #FFF;
background-color: #68A090;
border: 1px solid #44685E;
}
.normal {
background-color: #A8A878;
border: 1px solid #6D6D4E;
}
.fire {
background-color: #F08030;
border: 1px solid #9C531F;
}
.water {
background-color: #6890F0;
border: 1px solid #445E9C;
}
.electric {
background-color: #F8D030;
border: 1px solid #A1871F;
}
.grass {
background-color: #78C850;
border: 1px solid #4E8234;
}
.ice {
background-color: #98D8D8;
border: 1px solid #638D8D;
}
.ground {
background-color: #E0C068;
border: 1px solid #927D44;
}
.flying {
background-color: #A890F0;
border: 1px solid #6D5E9C;
}
.ghost {
background-color: #705898;
border: 1px solid #493963;
}
.rock {
background-color: #B8A038;
border: 1px solid #786824;
}
.fighting {
background-color: #C03028;
border: 1px solid #7D1F1A;
}
.poison {
background-color: #A040A0;
border: 1px solid #682A68;
}
.psychic {
background-color: #F85888;
border: 1px solid #A13959;
}
.bug {
background-color: #A8B820;
border: 1px solid #6D7815;
}
.dark {
background-color: #705848;
border: 1px solid #49392F;
}
.steel {
background-color: #B8B8D0;
border: 1px solid #787887;
}
.dragon {
background-color: #7038F8;
border: 1px solid #4924A1;
}
@david-sosa-valdes
Copy link

you miss the fairy type, also i would like to thank you for sharing this info

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment