Advanced Search

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

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

Expand | Embed | Plain Text

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.