Advanced Search

Facebook & Twitter buttons

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

You need to login to post a comment.