Posted By

robnilas on 01/21/17


Tagged

css-button


Versions (?)

3 Colours Buttons


 / Published in: CSS
 

  1. .btn {
  2. border: solid 1px #d37300;
  3. -webkit-border-radius: 8px;
  4. -moz-border-radius: 8px;
  5. border-radius: 8px;
  6.  
  7. background: #fdc900 center top no-repeat;
  8.  
  9. background-image: -webkit-linear-gradient(bottom, #fe9f00, #fdc900);
  10. background-image: -moz-linear-gradient(bottom, #fe9f00, #fdc900);
  11. background-image: -o-linear-gradient(bottom, #fe9f00, #fdc900);
  12. background-image: -ms-linear-gradient(bottom, #fe9f00, #fdc900);
  13. background-image: linear-gradient(to top, #fe9f00, #fdc900);
  14.  
  15. -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 2px rgba(255,255,255,.27);
  16. -moz-box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 2px rgba(255,255,255,.27);
  17. box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 2px rgba(255,255,255,.27);
  18.  
  19. display: inline-block;
  20. vertical-align: middle;
  21. color: #fff;
  22. font-size: 26px;
  23. text-shadow: 0 1px 2px rgba(0,0,0,.35);
  24. line-height: 60px;
  25. margin: -5px auto 30px auto;
  26. padding: 0 1em;
  27. overflow:hidden;
  28. }
  29.  
  30. .btn:hover, .btn:focus {
  31. background: #fe9f00 center top no-repeat;
  32. text-decoration:none;
  33. }
  34.  
  35. .btn:active {
  36. background: #fe9f00 center top no-repeat;
  37. text-decoration:none;
  38. color: #fff;
  39. }
  40.  
  41. /* grey button */
  42. .greybtn {
  43. border: 1px solid #d2d2d2;
  44. -moz-border-radius: 5px;
  45. -webkit-border-radius: 5px;
  46. border-radius: 5px;
  47. -moz-outline-radius:5px;
  48. background: #ecebec center top no-repeat;
  49.  
  50. background-image: linear-gradient(bottom, #ecebec 0%, #fff 50%);
  51. background-image: -o-linear-gradient(bottom, #ecebec 0%, #fff 50%);
  52. background-image: -moz-linear-gradient(bottom, #ecebec 0%, #fff 50%);
  53. background-image: -webkit-linear-gradient(bottom, #ecebec 0%, #fff 50%);
  54. background-image: -ms-linear-gradient(bottom, #ecebec 0%, #fff 50%);
  55.  
  56. -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  57. -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  58. -o-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  59. -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  60. box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  61. display: inline-block;
  62. vertical-align: middle;
  63. color: #6b6b6b;
  64. font-size: 16px;
  65. line-height: 32px;
  66. text-shadow: 0 1px 0px rgba(255,255,255,.8);
  67. padding: 0 1em;
  68. overflow:hidden;
  69. margin-right: 10px;
  70. }
  71.  
  72. .greybtn:hover, .greybtn:focus {
  73. background: #d1d1d1 center top no-repeat;
  74.  
  75. background-image: linear-gradient(bottom, #d1d1d1 0%, #fff 50%);
  76. background-image: -o-linear-gradient(bottom, #d1d1d1 0%, #fff 50%);
  77. background-image: -moz-linear-gradient(bottom, #d1d1d1 0%, #fff 50%);
  78. background-image: -webkit-linear-gradient(bottom, #d1d1d1 0%, #fff 50%);
  79. background-image: -ms-linear-gradient(bottom, #d1d1d1 0%, #fff 50%);
  80.  
  81. text-decoration:none;
  82. }
  83.  
  84. .greybtn:active {
  85. background: #d1d1d1 center top no-repeat;
  86.  
  87. background-image: linear-gradient(bottom, #FFF 0%, #d1d1d1 50%);
  88. background-image: -o-linear-gradient(bottom, #FFF 0%, #d1d1d1 50%);
  89. background-image: -moz-linear-gradient(bottom, #FFF 0%, #d1d1d1 50%);
  90. background-image: -webkit-linear-gradient(bottom, #FFF 0%, #d1d1d1 50%);
  91. background-image: -ms-linear-gradient(bottom, #FFF 0%, #d1d1d1 50%);
  92.  
  93. -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.27);
  94. -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.27);
  95. box-shadow: 0 1px 0 rgba(255,255,255,0.27));
  96. color: #000;
  97. }
  98.  
  99. /* blue button */
  100. .bluebtn {
  101. border: 1px solid #335dab;
  102. -moz-border-radius: 5px;
  103. -webkit-border-radius: 5px;
  104. border-radius: 5px;
  105. -moz-outline-radius:5px;
  106. background: #5075c6 center top no-repeat;
  107. background-image: -webkit-gradient(linear, center top, center bottom, from(#5075c6), to(#3b63b2));
  108. background-image: -webkit-linear-gradient(top, #5075c6, #3b63b2);
  109. background-image: -moz-linear-gradient(top, #5075c6, #3b63b2);
  110. background-image: -o-linear-gradient(top, #5075c6, #3b63b2);
  111. background-image: -ms-linear-gradient(top, #5075c6, #3b63b2);
  112. background-image: linear-gradient(to bottom, #5075c6, #3b63b2);
  113. -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  114. -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  115. -o-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  116. -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  117. box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.27);
  118. display: inline-block;
  119. vertical-align: middle;
  120. color: #fff;
  121. font-size: 18px;
  122. text-shadow: 0 1px 0px rgba(0,0,0,.8);
  123. padding: 0 1em;
  124. overflow:hidden;
  125. line-height: 167%;
  126. }
  127.  
  128. .bluebtn:hover, .bluebtn:focus {
  129. background: #557dd4 center top no-repeat;
  130. background-image: -webkit-gradient(linear, center top, center bottom, from(#557dd4), to(#3f6abf));
  131. background-image: -webkit-linear-gradient(top, #557dd4, #3f6abf);
  132. background-image: -moz-linear-gradient(top, #557dd4, #3f6abf);
  133. background-image: -o-linear-gradient(top, #557dd4, #3f6abf);
  134. background-image: -ms-linear-gradient(top, #557dd4, #3f6abf);
  135. background-image: linear-gradient(to bottom, #557dd4, #3f6abf);
  136. text-decoration:none;
  137. }
  138.  
  139. .bluebtn:active {
  140. background: #3f6abf center top no-repeat;
  141. background-image: -webkit-gradient(linear, center top, center bottom, from(#3f6abf), to(#557dd4));
  142. background-image: -webkit-linear-gradient(top, #3f6abf, #557dd4);
  143. background-image: -moz-linear-gradient(top, #3f6abf, #557dd4);
  144. background-image: -o-linear-gradient(top, #3f6abf, #557dd4);
  145. background-image: -ms-linear-gradient(top, #3f6abf, #557dd4);
  146. background-image: linear-gradient(to bottom, #3f6abf, #557dd4);
  147. -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.27);
  148. -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.27);
  149. box-shadow: 0 1px 0 rgba(255,255,255,0.27));
  150. color: #fff;
  151. }
  152.  

Report this snippet  

You need to login to post a comment.