Advanced Search

google analytics buttons

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.         "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. 	<title>google analytics buttons</title>
  7. <style type="text/css">
  8. /* default stuff */
  9. body {padding:20px; font-family:arial; text-align:center;}
  10. p, li {font-size: 12px; line-height:18px;}
  11. h3 {margin-bottom:6px;}
  12. .examplesGoHere {text-align:left; margin:0 auto; }
  13. .letsGiveItAFixedWidthOf200Pixels { width:200px; }
  14. ul {list-style:none;margin-left:0;padding-left:0;margin-top:0;}
  15. ul li {margin-bottom:8px; margin-left:0;padding-left:0; }
  16.  
  17.  
  18.  
  19. /* notched effect for links in the unordered list */
  20. .notchedListItems a {
  21. 	display:block;
  22. 	border: solid #666;
  23. 	border-width: 0 1px;
  24. 	text-decoration: none;
  25. 	outline:none;
  26. 	color: #000;
  27. 	background: #e4e4e4;
  28. }
  29. .notchedListItems a b {
  30. 	display: block;
  31. 	position:relative;
  32. 	top: -1px;
  33. 	left: 0;
  34. 	border:solid #666;
  35. 	border-width:1px 0 0;
  36. 	font-weight:normal;
  37. }
  38. .notchedListItems a b b {
  39.   border-width:0 0 1px;
  40.   top: 2px;
  41.   padding:1px 6px;
  42. }
  43. .notchedListItems a:hover,
  44. .notchedListItems a:hover b {background:#666;color:white;}
  45.  
  46.  
  47.  
  48. .feature {
  49. 	border:solid #647aae;
  50.  	border-width:0 1px;
  51. 	background:#b0c0e6;
  52. }
  53. .feature div {
  54.   position:relative;
  55.   top: -1px;
  56.   left: 0;
  57.   border:solid #647aae;
  58.   border-width:1px 0 0;
  59. }
  60. .feature div div {
  61. 	top: 2px;
  62. 	border-width:0 0 1px;
  63. 	padding: .3em .3em .1em;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68.  
  69. <div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels">
  70.  
  71. 	<h3>A list</h3>
  72.  
  73. 	<ul class="notchedListItems">
  74. 		<li><a href="#"><b><b>About</b></b></a></li>
  75. 		<li><a href="#"><b><b>Contact</b></b></a></li>
  76. 		<li><a href="#"><b><b>Buy Pie</b></b></a></li>
  77. 	</ul>
  78.  
  79.  
  80. 	<h3>A div</h3>
  81.  
  82. 	<div class="feature">
  83. 		<div>
  84. 			<div>
  85. 				<p>This is an example of the notched corners as applied to a div container.</p>
  86. 				<p>This is an example of the notched corners as applied to a div container.</p>
  87. 				<p>This is an example of the notched corners as applied to a div container.</p>
  88. 			</div>
  89.  
  90. 		</div>
  91. 	</div>
  92.  
  93.  
  94.  
  95.  
  96. </div><!-- end .examplesGoHere -->
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103. </body>
  104. </html>

URL: http://www.askthecssguy.com/examples/notchedcorners/index.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.