Created
May 6, 2012 03:55
-
-
Save agarie/2610520 to your computer and use it in GitHub Desktop.
CSS buttons for pokémon types.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Poké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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
you miss the fairy type, also i would like to thank you for sharing this info