Home / Frontend Codes and Demos / CSS Code Demos / Pressable, iOS Compatible CSS Button
Pressable, iOS Compatible CSS Button

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.

Pressable, iOS Compatible CSS Button

Pressable, iOS Compatible CSS Button

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
Hits
Created JULY 18, 2012
Official Page: Go to website
License Open
{loadmodule mod_custom,Article Adsense Ads}

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

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …