Crear botón de acción circular con borde punteado-dotborder. js
| Autor: | fugroup |
|---|---|
| Views Total: | 719 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 25, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
dotborder. js es un plugin de JavaScript Vanilla para crear una acción circular (radial) personalizable con bordes punteados.
Funcionamiento
Cree el código HTML para el botón de acción.
<div class="button"> <span>Action Button</span> </div>
Haga circular el botón de acción.
.button {
border-radius: 50%;
display: inline-block;
position: relative;
background-color: #fff;
text-align: center;
} Inserte el JavaScript ' dotborder. js ' en el documento.
<script src="./dotborder.js"></script>
Inicializar el complemento y configuración de los bordes punteados.
- degrees : los grados del botón que desea dibujar
- Rate : la velocidad a la que obtienes puntos
- offset : el desfase del circleRadius
- dotSize : el tamaño de los puntos
- buttonSize : el tamaño del botón
- dotClass : la clase de los puntos, utilice selector sin un '. '
- buttonClass : la clase del botón, utilice selector sin un '. '
dotborder({
degrees: 360,
rate: 10,
offset: 10,
dotSize: 4,
buttonSize: 200,
dotClass: 'dot',
buttonClass: 'button'
}) Aplica tus propios estilos al borde punteado.
.dot {
position: absolute;
border-radius: 50%;
background-color: black;
}
