iOS style action button

index.html

<ul>
 <li class="delete">Delete</li>
 <li class="cancel">Cancel</li>
</ul>

iOS-style-action-button.markdown

iOS style action button

Experiment to replicate the iOS action button using box shadows for the grove around it.

A Pen by Hervé Mischler on CodePen.

License.

style.less

body{
  display: box;
  height: 300px;
  background-color: hsla(217, 6%, 41%, 1);
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

.actionButton(@color){
  box-sizing: border-box;
  margin: 20px;
  padding: 0 10px 0 10px;
  width: 300px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background-color: @color;
  background-image: linear-gradient(
    top,
    lighten(@color, 20%) 0%,
    lighten(@color, 5%) 40%,
    @color 80%,
    lighten(@color, 8%) 100%
    );
  box-shadow:
  inset 0 1px 1px hsla(0,0,100%,.2),
  0 1px 2px hsla(0,0,0,.8),
  0 1px 0 4px hsla(0,0,100%,.15),
  0 0 0 4px hsla(220, 8%, 10%, 0.8);
  color:#fff;
  list-style-type: none;
  text-align:center;
  text-shadow: 0 -1px 0 darken(@color, 40%);
  font-weight: bold;
  font-size: 18px;
  line-height: 44px;
}

.delete{
  .actionButton(hsla(0, 92%, 38%, 1));
}

.cancel{
  .actionButton(hsla(215, 12%, 19%,1));
}