Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Sep 13th, 2012  |  syntax: None  |  size: 1.45 KB  |  hits: 8  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. body {
  2.   font-family: sans-serif;
  3. }
  4.  
  5. .buttonlist li {
  6.   list-style: none outside none;
  7.   font-weight: bolder;
  8.   border: 1px solid white;
  9.   padding: 20px;
  10.   color: white;
  11.   -webkit-transition: opacity 1s, visibility 1s, height 1s, padding 1s;
  12. }
  13.  
  14. .buttonlist li:nth-of-type(odd) {
  15.   background-color: #348EC0;
  16. }
  17.  
  18. .buttonlist li:nth-of-type(odd):hover,
  19. .buttonlist li:nth-of-type(odd):focus
  20. {
  21.   background-color: #126C9E;
  22. }
  23.  
  24. .buttonlist li:nth-of-type(even) {
  25.   background-color: #80CB37;
  26. }
  27.  
  28. .buttonlist li:nth-of-type(even):hover,
  29. .buttonlist li:nth-of-type(even):focus
  30. {
  31.   background-color: #5EA915;
  32. }
  33.  
  34. .buttonlist li.toggle {
  35.   background-color: #E1523D;
  36.   -webkit-transition: border 1s;
  37.   position: relative;
  38.   border-top-width: 5px;
  39. }
  40.  
  41. .buttonlist li.toggle:hover,
  42. .buttonlist li.toggle:focus
  43. {
  44.   background-color: #BF301B;
  45. }
  46.  
  47. .buttonlist li.toggle div {
  48.   position: absolute;
  49.   background: inherit;
  50.   -webkit-transition: -webkit-transform 1s, opacity 1s;
  51.   -webkit-transition-delay: 1s;
  52.   -webkit-transform: rotateX(180deg);
  53.   opacity: 0;
  54. }
  55.  
  56. .buttonlist li.toggle div:nth-of-type(2) {
  57.   -webkit-transform: rotateX(0);
  58.   opacity: 1;
  59. }
  60.  
  61. .buttonlist.hidden li.toggle div {
  62.   -webkit-transform: rotateX(0);
  63.   opacity: 1;
  64. }
  65.  
  66. .buttonlist.hidden li.toggle div:nth-of-type(2) {
  67.   -webkit-transform: rotateX(180deg);
  68.   opacity: 0;
  69. }
  70.  
  71. .buttonlist.hidden li.toggle {
  72.   border-top-width: 1px;
  73. }
  74.  
  75. .buttonlist.hidden li.hideable {
  76.   opacity: 0;
  77.   visibility: hidden;
  78.   height: 0;
  79.   padding: 0;
  80. }
create a new version of this paste RAW Paste Data