Para poder usar ese código tienes que hacer algunas cosas. Lo primero, no es CSS sino Less(un prepocesador CSS) así que tienes que convertirlo en CSS pero antes tienes que darles un valor a las variables:
@button-colour: #009ED8;
@button-tint: #008EC2;
He usado los colores de tu ejemplo pero puedes poner lo que quieras, despues de eso pones el resto del código y lo conviertes a CSS con alguna herramienta para esa tarea, hay montones, pero lo más sencillo es buscar un conversor online, por ejemplo: http://lesscss.org/less-preview/. Pegas hay el código en Less y te devuelve el CSS:
.button {
display: inline-block;
font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
position: relative;
padding: 0.8em 1.4em;
padding-right: 4.7em;
background: #009ED8;
border: none;
color: white;
transition: 0.2s;
}
.button:before,
.button:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding-top: inherit;
padding-bottom: inherit;
width: 3.8em;
content: "\00a0";
font-family: "FontAwesome", sans-serif;
font-size: 1.2em;
text-align: center;
transition: 0.2s;
transform-origin: 50% 60%;
}
.button:before {
background: #008EC2;
}
.button:hover {
background: #0079a5;
}
.button:active,
.button:focus {
background: #002e3f;
outline: none;
}
Para el icono de la lupa necesitas la tipografia Font Awesome que aparece en los estilos y cambiar el código de la propiedad content
ya que la lupa usa el código /f002
y no /00a0
que es un espacio en blanco.
Para usar Font Awesome puedes descargarlo o usar un CDN, pongo la versión 4 porque la actual (la versión 5) es un poco diferente.
Y ya solo queda darle a tu botón la clase .button
y ajustar si lo necesitas el ancho del recuadro del icono o cualquier otro estilo:
.button {
display: inline-block;
font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
position: relative;
padding: 0.8em 1.4em;
padding-right: 4.7em;
background: #009ED8;
border: none;
color: white;
transition: 0.2s;
}
.button:before,
.button:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding-top: inherit;
padding-bottom: inherit;
width: 3em;
content: "\f002";
font-family: "FontAwesome", sans-serif;
font-size: 1.2em;
text-align: center;
transition: 0.2s;
transform-origin: 50% 60%;
}
.button:before {
background: #008EC2;
}
.button:hover {
background: #0079a5;
}
.button:active,
.button:focus {
background: #002e3f;
outline: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="button">Search</button>