All encompassing single link h2 call to actions (w/ sexy hover transition)


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



Copy this code and paste it in your HTML
  1. CSS
  2.  
  3. #callToActions {
  4. float: left;
  5. padding: 0 10px 0 0;
  6. width: 146px;
  7. }
  8. #callToActions h2 {
  9. background: #FD57A9;
  10. border-radius: 3px;
  11. -moz-border-radius: 3px;
  12. -webkit-border-radius: 3px;
  13. font-size: 1em;
  14. font-weight: normal;
  15. margin: 0 0 5px 0;
  16. min-height: 130px;
  17. padding: 0;
  18. text-transform: none;
  19.  
  20. }
  21. #callToActions a {
  22. color: #fff;
  23. display: block;
  24. padding: 10px;
  25. }
  26. #callToActions h2 a:hover {
  27. background: rgba(0, 0, 0, 0.2);
  28. transition: all .3s linear;
  29. -webkit-transition: all .3s linear;
  30. -moz-transition: all .3s linear;
  31. }
  32. #callToActions h2 img {
  33. height:65px;
  34. margin: -10px 0 0 -10px;
  35. width: 146px;
  36. }
  37. #callToActions h2 strong {
  38. display: block;
  39. font-size: 1.4em;
  40. margin: 8px 0 4px 0;
  41. text-transform: uppercase;
  42. }
  43. #callToActions h2 span {
  44. text-transform: none;
  45. }
  46. #callToActions #callYour {
  47. background:#B8D439;
  48. }
  49. #callToActions #callTalking {
  50. background:#6CBCD0;
  51. }
  52.  
  53. CSS (ie6)
  54. #callToActions h2 {
  55. padding-top: 58px; /* this needs to be the same height as the image */
  56. position: relative;
  57. }
  58. #callToActions h2 img {
  59. margin: 0 !important;
  60. top: 0;
  61. left: -0px;
  62. position: absolute;
  63. }
  64.  
  65.  
  66. HTML
  67.  
  68. <div id="callToActions">
  69. <h2 id="callWhere">
  70. <a href="">
  71. <img src="/images/b-where-do-we-work.jpg" width="156" height="65" alt="" />
  72. <strong>Where do we work</strong>
  73. blah blah blah. <span class="readMore">more&hellip;</span>
  74. </a>
  75. </h2>
  76. <h2 id="callYour">
  77. <a href="">
  78. <img src="/images/b-your-project.jpg" width="156" height="65" alt="" />
  79. <strong>Your Project</strong>
  80. It started with ink, but it hasn't stopped there. <span class="readMore">more&hellip;</span>
  81. </a>
  82. </h2>
  83. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.