Apple’s calendar navigation buttons using css

CalendarThis days I am a big fan of the calendar on Mac OS X. Calendar on Mac os x 10.8.1 is much impressive, the way text and button engrave on navigation bar is the most attractive to me. So here I have done little trick on css to make similar as apple calendar for my new project on Nepali calendar (still enhancing, So under development. Will update with new ideas and tricks)

CSS codes

.csstoday {
border: 1px solid #7c5932;
-moz-box-shadow: inset 1px 1px 5px 0px #7c5932;
-webkit-box-shadow: inset 1px 1px  5px 0px #7c5932;
box-shadow: inset 1px 1px  5px 0px #7c5932;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 1px 1px 1px #FFE9B1;
font-weight: normal;
margin: 5px 5px;
padding: 2px 10px;
color: #000000;
letter-spacing: 1px;
font-family: 'Arial', sans-serif;
font-size: 18px;
width: 100px;
text-transform: none;
text-align: center;
text-decoration: none;
cursor: pointer;
display: inline-block;
background-color: rgba(0, 0, 0, 0.1);
<div class="leather-strip"><span class="csstoday">वि.सं २०६९</span></div>

Apple calendar in mac os x 10.8.1

Nepali Calendar like apple calendar on mac os x 10.8.1
Nepali Calendar like apple calendar button

Leave a Reply

Your email address will not be published. Required fields are marked *