Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the various Button CSS Components in Onsen UI.
The Button is used to perform some action when the user clicks on the button. The Button CSS Components can be utilized to make the button with different styling that indicates the specific action attached to the button.
Onsen UI Button CSS Components Classes:
- Button: This component contains a class that is used to create a simple button.
- Outline Button: This component contains a class that is used to create a button with an outline effect.
- Light Button: This component contains a class that is used to create a button with a light effect.
- Quiet Button: This component contains a class that is used to create a normal button.
- Call To Action Button: This component contains a class that is used to create a button with simple effects.
- Large Quiet Button: This component contains a class that is used to create a large button
- Large Call To Action Button: This component contains a class that is used to create a large button with simple effects.
- Material Button: This component contains a class that is used to create a button.
- Material Flat Button: This component contains a class that is used to create a flat button.
Syntax:
<element-name class="button">...</element-name>
Example 1: This example describes the Onsen UI Button CSS Components.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<title>Onsen UI Button</title>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Onsen UI Button CSS Components
</h3>
<button class="button">
Basic Button
</button>
<button class="button button--material">
Material Button
</button>
<button class="button button--material--flat">
Flat Button
</button>
</center>
</body>
</html>
|
Output:
Example2: In this example, we will see how to include different types of buttons using Onsen UI.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<title>Onsen UI Button</title>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Onsen UI Button CSS Components
</h3>
<button class="button">
Simple Button
</button>
<button class="button button--outline">
Outline Button
</button>
<button class="button button--light">
Light Button
</button>
<button class="button button--quiet">
Quiet Button
</button>
<button class="button button--cta">
CTA Button
</button>
<button class="button button--large--quiet" style="width: 55%;
margin: 0 auto;">
Quiet Large Button
</button>
<button class="button button--large--cta" style="width: 55%;
margin: 0 auto;">
CTA Large Button
</button>
<br>
<button class="button button--material">
Material Button
</button>
<button class="button button--material--flat">
Flat Button
</button>
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#button-category