Pressable, iOS Compatible CSS Button.A ‘pressable’ CSS button that is still pressable on mobile safari. The secret is having ontouchstart=”” set in a containing element, allowing the :active pseudo-class to work; the body tag is fine. I am pretty sure this won’t work on Android, but I don’t have a device to test on.

Demo Download

Author jemware
Created JULY 18, 2012
Official Page: Go to website
License Open
[ads1]

 

HTML Snippet

<div ontouchstart="">   <div class="button">     <a href="#">Mobile First</a>   </div> </div>

CSS Code

body{   text-align:center;   background-color:#ffcc8e; }  .button{   position:relative;   display:inline-block;   margin:20px; }  .button a{   color:white;   font-family:Helvetica, sans-serif;   font-weight:bold;   font-size:36px;   text-align: center;   text-decoration:none;   background-color:#FFA12B;   display:block;   position:relative;   padding:20px 40px;      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   text-shadow: 0px 1px 0px #000;   filter: dropshadow(color=#000, offx=0px, offy=1px);      -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;   -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;   box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;      -webkit-border-radius: 5px;   -moz-border-radius: 5px;   border-radius: 5px; }  .button a:active{   top:10px;   background-color:#F78900;      -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;   -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;   box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100; }  .button:after{   content:"";   height:100%;   width:100%;   padding:4px;   position: absolute;   bottom:-15px;   left:-4px;   z-index:-1;   background-color:#2B1800;   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   border-radius: 5px; }

Preview

Pressable, iOS Compatible CSS Button preview