<template>
  <div id="BotonesShopping" class="row">
 <router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <a href="#" class="btn .azul btn-primary active" role="button" aria-pressed="true">Datos Personales</a></router-link>
<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Direcciones</a> </router-link>
<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Envio</a> </router-link>
<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Pago</a>  </router-link>

  </div>
</template>

<script>
export default {

}
</script>
<style >

.verde{
    background-color: #29B026 ;
}
.azul{
    background-color: #1B3D70 !important;
}
.gris{
    background-color: #C4C4C4;
}

.navshop  a {
 width: 100%;

}

@media screen and (max-width:1023px ) and (min-width: 770px) {
  .navshop a {
    font-size: .8rem !important;
    }
}



</style>
