@font-face {
  font-family: Shabnam;
  src: url('../fonts/shabnam-font-v5.0.1/Shabnam.eot');
  src: url('../fonts/shabnam-font-v5.0.1/Shabnam.eot?#iefix') format('embedded-opentype'),
       url('../fonts/shabnam-font-v5.0.1/Shabnam.woff2') format('woff2'),
       url('../fonts/shabnam-font-v5.0.1/Shabnam.woff') format('woff'),
       url('../fonts/shabnam-font-v5.0.1/Shabnam.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: Shabnam;
  src: url('../fonts/shabnam-font-v5.0.1/Shabnam-Bold.eot');
  src: url('../fonts/shabnam-font-v5.0.1/Shabnam-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/shabnam-font-v5.0.1/Shabnam-Bold.woff2') format('woff2'),
       url('../fonts/shabnam-font-v5.0.1/Shabnam-Bold.woff') format('woff'),
       url('../fonts/shabnam-font-v5.0.1/Shabnam-Bold.ttf') format('truetype');
  font-weight: bold;
}

body{

margin: 10px 30px;

}

.button {

border: none;
border-radius: 7px;
margin: 4px 2px;
padding: 8px 15px;
font-family: Shabnam, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer; 

}

.button-next {

color: white;
background-color: green;

}

.button-pre {

color: white;
background-color: orangered;

}

.button-black{

color: white;
background-color: black

}

.button-next:hover{

color: black;
background-color: lightgreen; 

}

.button-pre:hover {

color: black;
background-color: orange;

}