Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
Los botones son uno de los elementos de interfaz de usuario más comunes. Cuando queremos realizar alguna acción y queremos navegar a una página diferente, podemos usar el botón. El botón de llamada a la acción del componente CSS de la interfaz de usuario de Onsen se usa para crear el botón CTA (llamada a la acción) usando la clase button-cta .
Clase de botón de llamada a la acción del componente CSS de la interfaz de usuario de Onsen:
- button–cta: esta clase se utiliza para crear el botón de llamada a la acción.
Sintaxis:
<button class="button button--cta">
...
</button>
Ejemplo 1: El siguiente ejemplo muestra el botón de llamada a la acción del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Call To Action Button </h3> <button class="button button--cta"> GeeksforGeeks </button> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el botón de llamada a la acción del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Call To Action Button </h3> <button class="button button--cta"> Java </button> <button class="button button--cta" disabled> C++ </button> <button class="button button--cta"> Python </button> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#button-category
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA