API tools faq
paste
Advertisement
Guest User

button style

a guest
Dec 22nd, 2014
174
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.07 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title></title>
  4. <style>
  5.  
  6. html { overflow-y: scroll; }
  7.  
  8. .tabs {
  9. position: relative;
  10. min-height: 100px; /* This part sucks */
  11. clear: both;
  12. margin: 10px 0 10px 0;
  13. }
  14. .tab {
  15. float: left;
  16. }
  17. .tab label {
  18. background: none;
  19.  
  20. cursor: pointer;
  21. width: 50px;
  22. text-align: center;
  23. display: block;
  24. border: none;
  25. position: center;
  26. margin-left: 200px;
  27. }
  28. .tab label i {
  29. font-style: normal;
  30. font-size: 8px;
  31. color: #aaa;
  32. }
  33. .tab [type=radio] {
  34. display: none;
  35. }
  36. .content {
  37. position: absolute;
  38. top: 220px;
  39. opacity: 0;
  40. left: 0;
  41. background: transparent;
  42. right: 0;
  43. bottom: 0;
  44. padding: 0px 20px;
  45. border: 0px solid #ccc;
  46. height: 0;
  47.  
  48. -webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  49. -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  50. -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  51. -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  52. transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  53.  
  54. }
  55. [type=radio]:checked ~ label {
  56. z-index: 2;
  57. }
  58. [type=radio]:checked ~ label ~ .content {
  59. z-index: 1;
  60. opacity: 1;
  61. height: 100%;
  62. padding: 20px;
  63. }
  64.  
  65. #close-tab {
  66. position: absolute;
  67. z-index: -1;
  68. top: 0px;
  69. }
  70.  
  71. #close-tab label {
  72. background: none;
  73. border-bottom: none;
  74. }
  75.  
  76. [type=radio]:checked ~ label ~ #close-tab {
  77. z-index: 3;
  78. }
  79. </style>
  80.  
  81. </head><body background="http://i.imgur.com/76oG4Gm.jpg">
  82. <center><img src="http://i.imgur.com/Hl8UiS8.png"></center>
  83. <center><form>
  84. <div class="tabs">
  85.  
  86. <div class="tab">
  87. <input type="radio" id="tab-1" name="tab-group-1">
  88. <label for="tab-1"><img src="http://i.imgur.com/o0CnhMm.png"></label>
  89. <div class="tab" id="close-tab">
  90. <input type="radio" id="tab-close" name="tab-group-1">
  91. <label for="tab-close"><img src="http://i.imgur.com/o0CnhMm.png"></label>
  92. </div>
  93.  
  94. <div class="content">
  95. <div style="width:500px"><div align="justify"><font color="white"><font style="font-size: 13px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;"><b>what's a birthday without gifts? </b><font style="font-size: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;"> i wouldn't know, and you shouldn't either. today you get to be spoiled.<br><br>
  96. <img src="http://i.imgur.com/AvZieYY.png">
  97. </div></div>
  98. </div>
  99. </div>
  100.  
  101. <div class="tab">
  102. <input type="radio" id="tab-2" name="tab-group-1">
  103. <label for="tab-2"><img src="http://i.imgur.com/dg0PY87.png"></label>
  104. <div class="tab" id="close-tab">
  105. <input type="radio" id="tab-close" name="tab-group-1">
  106. <label for="tab-close"><img src="http://i.imgur.com/dg0PY87.png"></label>
  107. </div>
  108.  
  109. <div class="content">
  110. <div style="width:500px"><div align="justify"><font color="white"><font style="font-size: 13px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;"><b>30 things I like about you.</b> <font><font style="font-size: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;">
  111. your strong and gentle hands.
  112. the way you fucking love pizza.
  113. our naps.
  114. our naked naps.
  115. the raised eyebrow of skepticism.
  116. how great you look in a suit.
  117. your great taste in wine, and really all drinks.
  118. the way you talk about your family.
  119. when i wake up to a song from you.
  120. how sexy you look in your glasses, and okay maybe always.
  121. the way you remember little details of stories i've told you.
  122. your grumpy shell.
  123. the snuggly sap inside.
  124. that thing you do with your tongue, you know the one.
  125. your smile.
  126. your quick wit.
  127. how you're always so warm.
  128. your talent and drive for the work that you do.
  129. your sense of adventure.
  130. your bum.
  131. the way you take care of the people who matter to you.
  132. when you pick me up.
  133. your love of plaid.
  134. how you make me feel appreciated for my weird quirks, not in spite of them.
  135. sitting in your lap watching films.
  136. the way you hold my waist when we're out somewhere.
  137. your eyes.
  138. your laughs, all of them, every one of them.
  139. how you treat people with respect.
  140. your confidence.
  141. </font>
  142. <font style="font-size: 13px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;"><b>And one to grow on:</b><font style="font-size: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;"> the fact that you're mine and i get to steal you to celebrate your special day (a couple days early, but who's counting?). and i do intend to make it a special one for you, because, you know, i <I>kinda like you and stuff.</i> no but seriously, you're amazing and you deserve all great things. thank you for making me happy all the time. happy birthday, love. </font></div></div>
  143. </div>
  144. </div>
  145.  
  146. <div class="tab">
  147. <input type="radio" id="tab-3" name="tab-group-1">
  148. <label for="tab-3"><img src="http://i.imgur.com/2quyZEj.png"></label>
  149. <div class="tab" id="close-tab">
  150. <input type="radio" id="tab-close" name="tab-group-1">
  151. <label for="tab-close"><img src="http://i.imgur.com/2quyZEj.png"></label>
  152. </div>
  153.  
  154. <div class="content">
  155. <div style="width:500px"><div align="justify"><font color="white"><font style="font-size: 13px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;"><b>it's date night.</b> <font><font style="font-size: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; line-height: 14px;">get dressed, because we're going out. first stop is the <a href="http://www.boisdale.co.uk/"><font color="white">boisdale</a>, for the best cigars in london. <a href="http://www.boisdale.co.uk/menu-files/cw_cigar_list_MAY_2012.pdf"><font color="white">your choice</a>, my treat. however, that place is a bit too stuffy for our sort of celebrations, so once you've made your selections and we've kicked the night off, we're moving our excursion to soho. keeping with the theme, though, our destination is <a href="http://www.floriditalondon.com/"><font color="white">the floridita</a>, for dinner, drinking and dancing. the space evokes an air of 1930s havana, and they boast an impressive menu of latin american classics along with the most impressive selection of rums in europe, apparently. and they get around the pesky smoking ban with private dining rooms, so you can smoke your cigars while we dine in peace before we hit the dance floor for the cuban band and the dj. beyond that, london's our oyster for the night. <small><small><a href="http://jennacoleman.insanejournal.com/59997.html"><font color="white">CLICK ME LAST.</a></small></small>
  156. <br><br>
  157. <img src="http://i.imgur.com/e2z7G5d.png">
  158. <br><br>
  159. <img src="http://i.imgur.com/hlh6E90.png">
  160. <br><br>
  161. <img src="http://i.imgur.com/9pNgy7A.png">
  162. <br><br>
  163. </div>
  164. </div>
  165.  
  166.  
  167. </div>
  168. </form></center>
  169. </body>
  170. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!