Posted By

robnilas on 01/21/17


Tagged

css-button css-box


Versions (?)

3 Boxes - Full Code


 / Published in: CSS
 

  1. @font-face{
  2. font-family: 'WebSymbolsRegular';
  3. src: url('/fonts/websymbols-regular-webfont.eot');
  4. src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
  5. url('/fonts/websymbols-regular-webfont.woff') format('woff'),
  6. url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
  7. url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
  8. }
  9.  
  10. body {
  11. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  12. font-weight: normal;
  13. color: #1e1e1e;
  14. }
  15.  
  16. * {
  17. outline: none;
  18. -moz-box-sizing: border-box;
  19. -webkit-box-sizing: border-box;
  20. box-sizing: border-box;
  21. }
  22. .first { margin-left: 0 !important; }
  23.  
  24. /* columns */
  25. .landing-box .col { float: left; margin-left: 3%; padding: 0 24px; text-align: center; }
  26. .landing-box .col .text-area p { font-size: 15px; line-height: 22px; }
  27. .landing-box .col .text-area p, .landing-box .col .text-area { margin-bottom: 22px; }
  28. .landing-box .col .text-area h4 { font-size: 21px; line-height: 29px; }
  29. .landing-box .col p { margin-bottom: 24px; }
  30. .landing-box .col .icon { font-size: 36px; margin-bottom: 24px; }
  31. .landing-box .box-cols .col { background-color: #fff; border: 1px solid #ddd; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .1); box-shadow: 0 0 6px rgba(0, 0, 0, .1); }
  32. .landing-box .two-columns.box-text, .landing-box .three-columns.box-text { margin-bottom: 48px; }
  33. .landing-box .two-columns.box-cols, .landing-box .three-columns.box-cols { margin-bottom: 24px; }
  34. .landing-box .box-cols + .box-text { margin-top: 48px; }
  35. .landing-box .two-columns .col { width: 48.5%; }
  36. .landing-box .two-columns.box-cols .col { padding: 36px; }
  37. .landing-box .three-columns .col { padding: 0 12px; width: 31.333333333333%; }
  38. .landing-box .three-columns.box-cols .col { padding: 36px 24px; }
  39.  
  40.  
  41. .icon { font-family: 'WebSymbolsRegular'; display: inline-block; line-height: 1; }
  42.  
  43. /* button */
  44. a { color: #ae2525; text-decoration: none; }
  45. a img { vertical-align: top; }
  46. input { font-size: inherit; line-height: 1em; font-family: inherit; background-color: #fff; }
  47. input, textarea { background-color: #fff; border: 1px solid #ddd; font-family: inherit; font-size: 15px; padding: 12px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .1); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); -webkit-appearance: none; }
  48. input[type="text"], input[type="email"], input[type="password"], textarea { -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; }
  49. input.name, input#author, input.email, input#email, input#url { background: #fff url(/wp-content/thesis/skins/marketers-delight/images/sprite.png) no-repeat; padding-left: 41px; }
  50. input.name, input#name { background-position: 2px 0; }
  51. input.email, input#email { background-position: 2px -43px; }
  52. input#url { background-position: 2px -86px; }
  53. input:focus, textarea:focus { border-color: #ff7878; -moz-box-shadow: 0 0 5px #ff7878; -webkit-box-shadow: 0 0 5px #ff7878; box-shadow: 0 0 5px #ff7878; }
  54. form input[type="submit"] { border: 1px solid rgba(0, 0, 0, .4); color: #fff; cursor: pointer; padding: 12px; }
  55. :-moz-placeholder { color: #777; }
  56. ::-webkit-input-placeholder { color: #777; }
  57. :focus::-webkit-input-placeholder { color: transparent; }
  58. :focus:-moz-placeholder { color: transparent; }
  59. .button { color: #fff; border-width: 1px; border-style: solid; }
  60. .button, a.button, a.button:hover, input[type="submit"], .previous_posts a, .next_posts a, #cancel-comment-reply-link { border: 1px solid rgba(0, 0, 0, .4) !important; color: #fff !important; display: inline-block; font-size: 1em; font-weight: 500; padding: 8px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .6); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .4); }
  61. .button.red, input[type="submit"], #cancel-comment-reply-link { background-color: #ae2525; }
  62. .button.red:hover, input[type="submit"]:hover, #cancel-comment-reply-link:hover { background-color: #921717; }
  63. .button.green, input.input_submit { background-color: #30a146; }
  64. .button.green:hover, input.input_submit:hover { background-color: #03821b; }
  65. .button.orange { background-color: #f99015; }
  66. .button.orange:hover { background-color: #e37b01; }
  67. .button.blue { background-color: #16a4c8; }
  68. .button.blue:hover { background-color: #127ea7; }
  69. .button.gray, .previous_posts a, .next_posts a { background-color: #dadada; border-color: rgba(0, 0, 0, .2); color: #777 !important; text-shadow: 1px 1px 1px rgba(255, 255, 255, .6); }
  70. .button.gray:hover, a.button.gray:hover, .previous_posts a:hover, .next_posts a:hover { background-color: #ccc; }
  71. .button.dark { background-color: #2e2e2e; }
  72. .button.dark:hover { background-color: #010101; }
  73.  

Report this snippet  

You need to login to post a comment.