Getting the right amount of visual attractiveness and common interface into a site, so as to make it easy for a user, can be a difficult path to tread. On the one hand, everyone expects that their site should reflect their brand, with visuals, graphics, fonts, image and user interface all being custom to them, however, making web applications that users find easy to se normally means compromising on some parts to make the site navigation easily recognisable. One such little element you can place in your site would be css style buttons, especially if they to some extend replicate the commonly found buttons on native/desktop applications.
I have a couple of bits of css below which illustrate that native-style buttons are not to hard to complete, can make your links more attractive to click on and be used within web applications to aid in a familiar user interface.
a.download {
color: #383838;
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
border: #888888 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 1px 1px 0px #bcbcbc;
filter: dropshadow(color=#bcbcbc, offx=1, offy=1);
padding: 3px;
}
:hover (mouseover)a.download:hover {
color: #383838;
background: #c8d7dc; /* Old browsers */
background: -moz-linear-gradient(top, #c8d7dc 0%, #e3eaed 63%, #f2f5f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8d7dc), color-stop(63%,#e3eaed), color-stop(100%,#f2f5f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* IE10+ */
background: linear-gradient(to bottom, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8d7dc', endColorstr='#f2f5f6',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 1px #efefef;
filter: dropshadow(color=#efefef, offx=1, offy=1);
}
:active (click)a.download:active {
border: #cccccc 1px solid;
}
Connect on LinkedIn. Follow me on Twitter. Grab the RSS Feed