/* Sitio Web Creado por ITred Spa. Direccion: Guido Reni #4190 Pedro Aguirre Cerda - Santiago - Chile contacto@itred.cl o itred.spa@gmail.com https://www.itred.cl Creado, Programado y Diseñado por ITred Spa. BPPJ */ /* ------------------------------------------------------------------------------------------------------------- --------------------------------- INICIO ITred Spa botones_navegacion .CSS ---------------------------------- ------------------------------------------------------------------------------------------------------------- */ /* TITULO 1 BOTONES DE NAVEGACION Y SCROLL */ /* sin estilos */ /* SUBTITULO 1 BOTON IR ARRIBA */ .boton_navegacion_arriba { position: fixed; /* fija el boton respecto a la ventana */ top: 1.5vh; /* establece la distancia respecto al borde superior */ right: 1.3vw; /* establece la distancia respecto al borde derecho */ width: 5vmin; /* establece el ancho proporcional del boton */ height: 5vmin; /* establece la altura proporcional del boton */ background-color: #99813D; /* establece el color de fondo del boton */ color: #ffffff; /* establece el color de la flecha */ border: none; /* elimina el borde del boton */ border-radius: 50%; /* transforma el boton en una figura circular */ cursor: pointer; /* muestra el cursor de seleccion */ display: flex; /* organiza el contenido mediante una estructura flexible */ align-items: center; /* centra verticalmente la flecha */ justify-content: center; /* centra horizontalmente la flecha */ font-size: 1.8vmin; /* establece el tamaño de la flecha */ box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.25); /* establece la sombra del boton */ transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* establece la transicion del boton */ opacity: 0; /* mantiene el boton oculto inicialmente */ visibility: hidden; /* oculta visualmente el boton inicialmente */ pointer-events: none; /* desactiva la interaccion mientras permanece oculto */ z-index: 9999; /* establece la prioridad de capa del boton */ } .boton_navegacion_arriba.visible { opacity: 0.85; /* establece la opacidad del boton visible */ visibility: visible; /* hace visible el boton */ pointer-events: auto; /* permite interactuar con el boton */ } .boton_navegacion_arriba:hover { background-color: #8A7437; /* establece el color de fondo al posicionar el cursor */ opacity: 1; /* aumenta la opacidad del boton */ transform: scale(1.1); /* aumenta proporcionalmente el tamaño del boton */ } /* SUBTITULO 2 BOTON IR ABAJO */ .boton_navegacion_abajo { position: fixed; /* fija el boton respecto a la ventana */ bottom: 1.5vh; /* establece la distancia respecto al borde inferior */ right: 1.3vw; /* establece la distancia respecto al borde derecho */ width: 5vmin; /* establece el ancho proporcional del boton */ height: 5vmin; /* establece la altura proporcional del boton */ background-color: #99813D; /* establece el color de fondo del boton */ color: #ffffff; /* establece el color de la flecha */ border: none; /* elimina el borde del boton */ border-radius: 50%; /* transforma el boton en una figura circular */ cursor: pointer; /* muestra el cursor de seleccion */ display: flex; /* organiza el contenido mediante una estructura flexible */ align-items: center; /* centra verticalmente la flecha */ justify-content: center; /* centra horizontalmente la flecha */ font-size: 1.8vmin; /* establece el tamaño de la flecha */ box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.25); /* establece la sombra del boton */ transition: all 0.3s ease; /* establece la transicion del boton */ opacity: 0.85; /* establece la opacidad inicial del boton */ z-index: 9999; /* establece la prioridad de capa del boton */ } .boton_navegacion_abajo:hover { background-color: #8A7437; /* establece el color de fondo al posicionar el cursor */ opacity: 1; /* aumenta la opacidad del boton */ transform: scale(1.1); /* aumenta proporcionalmente el tamaño del boton */ } .flecha_navegacion_arriba, .flecha_navegacion_abajo { line-height: 1; /* establece la altura de linea de los simbolos */ } /* pantallas grandes (monitores Full HD+, iMac, monitores gaming QHD/4K) */ @media (min-width: 1441px) { /* Sin media */ } /* notebooks grandes (1600x900, 1920x1080) */ @media (max-width: 1440px) { /* Sin media */ } /* notebooks comunes (1366x768, MacBook Air/Pro) */ @media (max-width: 1200px) { .boton_navegacion_arriba, .boton_navegacion_abajo { width: 5.8vmin; /* ajusta el ancho de los botones de navegacion */ height: 5.8vmin; /* ajusta la altura de los botones de navegacion */ font-size: 2vmin; /* ajusta el tamaño de las flechas de navegacion */ } } /* tablets horizontales / pantallas medianas (iPad Pro en horizontal, notebooks pequeños) */ @media (max-width: 992px) { .boton_navegacion_arriba, .boton_navegacion_abajo { width: 6.5vmin; /* ajusta el ancho de los botones de navegacion */ height: 6.5vmin; /* ajusta la altura de los botones de navegacion */ font-size: 2.2vmin; /* ajusta el tamaño de las flechas de navegacion */ } .boton_navegacion_arriba { top: auto; /* desactiva la posicion superior */ bottom: 1.3vh; /* coloca el boton en la posicion inferior */ right: 1.3vw; /* mantiene la distancia respecto al borde derecho */ display: flex; /* mantiene visible el boton para volver arriba */ } .boton_navegacion_abajo { display: none; /* oculta el boton para ir abajo */ } } /* tablets verticales (iPad clásico, tablets Android estándar) */ @media (max-width: 768px) { .boton_navegacion_arriba, .boton_navegacion_abajo { width: 7.5vmin; /* ajusta el ancho de los botones de navegacion */ height: 7.5vmin; /* ajusta la altura de los botones de navegacion */ font-size: 2.5vmin; /* ajusta el tamaño de las flechas de navegacion */ } .boton_navegacion_arriba { top: auto; /* desactiva la posicion superior */ bottom: 1.2vh; /* mantiene el boton en la posicion inferior */ right: 2vw; /* ajusta la distancia respecto al borde derecho */ } } /* móviles grandes (iPhone 11, iPhone Plus/Max, Android grandes) */ @media (max-width: 414px) { .boton_navegacion_arriba, .boton_navegacion_abajo { width: 10vmin; /* ajusta el ancho de los botones de navegacion */ height: 10vmin; /* ajusta la altura de los botones de navegacion */ font-size: 3.2vmin; /* ajusta el tamaño de las flechas de navegacion */ } .boton_navegacion_arriba { top: auto; /* desactiva la posicion superior */ bottom: 1vh; /* mantiene el boton en la posicion inferior */ right: 3vw; /* ajusta la distancia respecto al borde derecho */ } } /* móviles medianos (iPhone 12/13/14, Android gama media) */ @media (max-width: 390px) { .boton_navegacion_arriba, .boton_navegacion_abajo { width: 10.5vmin; /* ajusta el ancho de los botones de navegacion */ height: 10.5vmin; /* ajusta la altura de los botones de navegacion */ font-size: 3.4vmin; /* ajusta el tamaño de las flechas de navegacion */ } } /* móviles pequeños (Android estándar, iPhone SE) */ @media (max-width: 360px) { .boton_navegacion_arriba, .boton_navegacion_abajo { width: 11vmin; /* ajusta el ancho de los botones de navegacion */ height: 11vmin; /* ajusta la altura de los botones de navegacion */ font-size: 3.6vmin; /* ajusta el tamaño de las flechas de navegacion */ } } /* ------------------------------------------------------------------------------------------------------------- ---------------------------------- FIN ITred Spa botones_navegacion .CSS ------------------------------------ ------------------------------------------------------------------------------------------------------------- */