We can start by adding in two simple mixins to our code—let's begin by editing a copy of buttons.css and then adding the following code at the start of the file:

.shadow() { box-shadow: 0 1px 2px rgba(0,0,0,.2); text-shadow: 0 1px 1px rgba(0,0,0,.3); }

.formfont { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

Next, we can remove the original code from the .button style block, as this is no longer needed—it will be replaced by the names of our three simple mixins:

.button {
  .shadow;
  .formfont;
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: .5em 2em .55em;
  border-radius: .5em;
}

Save this as mixins1.less; we can then remove the buttons.css link that is already in the code. Don't forget to add in a link for our Less file, within mixins1.html:

    <link rel="stylesheet" type="text/less" href="css/mixins1.less">

Save the HTML file as mixins1.html—if we preview the results in a browser...