Posted By

konkas on 05/28/11


Tagged

twitter facebook


Versions (?)

Facebook & Twitter buttons


 / Published in: CSS
 

  1. button.facebook {
  2. background: #6e86bd;
  3. background: -moz-linear-gradient(top, #6e86bd 0%, #6680b9 100%);
  4. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6e86bd), to(#6680b9));
  5. border-top: 1px solid #3f5b98;
  6. border-left: 1px solid #3f5b98;
  7. border-bottom: 1px solid #3f5b98;
  8. border-right: 1px solid #3f5b98;
  9. -moz-border-radius: 6px;
  10. -webkit-border-radius: 6px;
  11. border-radius: 6px;
  12. -moz-box-shadow: inset 0 1px 0 0 #abbbdf;
  13. -webkit-box-shadow: inset 0 1px 0 0 #abbbdf;
  14. box-shadow: inset 0 1px 0 0 #abbbdf;
  15. color: #fff;
  16. font-size: 1.6em;
  17. font-weight: bold;
  18. line-height: 1;
  19. padding: 8px 0 7px 0;
  20. text-align: center;
  21. text-shadow: 0 -1px 1px #344d80;
  22. width: 233px;
  23. margin: 0 0 10px 0;
  24. }
  25.  
  26. button.facebook:hover {
  27. background: #546a99;
  28. background: -moz-linear-gradient(top, #546a99 0%, #546a99 100%);
  29. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#546a99), to(#546a99));
  30. -moz-box-shadow: inset 0 1px 0 0 #98a8d3;
  31. -webkit-box-shadow: inset 0 1px 0 0 #98a8d3;
  32. box-shadow: inset 0 1px 0 0 #98a8d3;
  33. text-shadow: 0 -1px 1px #283960;
  34. color: #fff;
  35. cursor: pointer;
  36. }
  37.  
  38. button.facebook:active {
  39. border: 1px solid #283960;
  40. -moz-box-shadow: inset 0 0 4px 2px #51658b, 0 0 1px 0 #eee;
  41. -webkit-box-shadow: inset 0 0 4px 2px #51658b, 0 0 1px 0 #eee;
  42. box-shadow: inset 0 0 4px 2px #51658b, 0 0 1px 0 #eee;
  43. }
  44.  
  45. button.twitter {
  46. background: #fff;
  47. background: -moz-linear-gradient(top, #fff 0%, #d5e9f6 100%);
  48. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d5e9f6));
  49. border-top: 1px solid #a4cce6;
  50. border-left: 1px solid #a4cce6;
  51. border-bottom: 1px solid #9eb9cc;
  52. border-right: 1px solid #a4cce5;
  53. -moz-border-radius: 6px;
  54. -webkit-border-radius: 6px;
  55. border-radius: 6px;
  56. color: #186588;
  57. font-size: 1.6em;
  58. font-weight: bold;
  59. line-height: 1;
  60. padding: 8px 0 7px 0;
  61. text-align: center;
  62. text-shadow: 0 1px 1px #fff;
  63. width: 233px;
  64. }
  65.  
  66. button.twitter:hover {
  67. background: #f2f8fc;
  68. background: -moz-linear-gradient(top, #f2f8fc 0%, #bfe0ee 100%);
  69. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2f8fc), to(#bfe0ee));
  70. border-top: 1px solid #53a3d7;
  71. border-left: 1px solid #53a3d7;
  72. border-bottom: 1px solid #68a0c4;
  73. border-right: 1px solid #53a3d5;
  74. text-shadow: 0 1px 1px #fff;
  75. color: #0c3752;
  76. cursor: pointer;
  77. }
  78.  
  79. button.twitter:active {
  80. background: #cee5f4;
  81. border-top: 1px solid #7ab7de;
  82. border-left: 1px solid #7ab7de;
  83. border-bottom: 1px solid #85acc5;
  84. border-right: 1px solid #7ab7de;
  85. text-shadow: 0 1px 1px #e6f0f8;
  86. color: #668a9e;
  87. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: no8u on May 28, 2011

like this.

You need to login to post a comment.