public
Last active

Inspired by the navigation menu on Git. Includes a base64 background image.

  • Download Gist
git_buttons.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
<style>
ul.tabs {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border:1px solid #DDDDDD;
height:26px;
margin:10px 0 0;
padding:6px 10px;
position:relative;
background:url(data:image/gif;base64,R0lGODlhVwAmAMQAAOjo6Nzc3OTk5OXl5eLi4t/f3+np6ebm5uPj4+Dg4O3t7erq6ufn5+Hh4d7e3uvr6+zs7N3d3QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABXACYAAAX/oCKOZGmeaKqubOu+cCyPUG3feK7vfO//wKBwSCwaj8jk7sFsOp/QqHRKrVqv2Kx2y+16v2DpYkwum8/otHrNbrvf8Lh8TjbY7/i8fs/v+/+AgYKDhIWGdwCJiouMjY6PkJGSk5AMlpeYmZqbnJ2en6ChoqOkpaaXB6mqq6ytrq+wsbKztLW2t7i5qgO8vb6/wMHCw8TFxsfIycrLzL0Cz9DR0tPU1dbX2NnWCNzd3t/g4eLj5OXm5+jp6uvs3QTv8PHy8/T19vf4+fr7/P3+//AaCBxIsKDBgwgTKlzIsKHDhxAjSpxIsaJFhAkyatzIsaPHjyBDihxJsqTJkyhTW2oswLKly5cwY8qcSbOmzZs4c+rcybOlg59AgwodSrSo0aNIkypdyrSp06dQo0qdWjSC1atYs2rdyrWr169gw4odS7as2bNo06rlGqCt27dw48qdS7eu3bt0QwAAOw==) repeat-x scroll 0 0 transparent;
}
 
ul.tabs li a {
-moz-border-radius:4px 4px 4px 4px;
color:#666666;
float:left;
font-size:14px;
height:26px;
line-height:26px;
margin-right:10px;
padding:0 8px;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
}
 
ul.tabs li a:hover {
background-color: #ccc;
color: #333;
}
</style>
 
<ul class="tabs">
<li><a href="http://example.com/test_01/">Test 01</a></li>
<li><a href="http://example.com/test_02/">Test 02</a></li>
<li><a href="http://example.com/test_03/">Test 03</a></li>
</ul>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.