Buttons
How do I make an buttons?
What is a buttons? How do you make a buttons? This script and codes were developed by Onsen & Monaca on 14 September 2022, Wednesday.
Buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Buttons</title> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/2.0.0-alpha.15/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/2.0.0-alpha.15/build/css/onsen-css-components.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ons-page> <ons-toolbar> <div class="center">Buttons</div> </ons-toolbar> <h3>Material Buttons</h3> <ons-button modifier="material">Button</ons-button> <ons-button modifier="material" disabled>Button</ons-button> <ons-button modifier="material"> <ons-ripple></ons-ripple> Ripple effect </ons-button> <h3>Flat Design</h3> <div style="text-align: center" class="content-padded" ng-controller="ButtonsController"> <ons-button>Normal</ons-button> <ons-button modifier="light">Light</ons-button> <ons-button modifier="outline">Outline</ons-button> <ons-button modifier="cta">CTA</ons-button> <ons-button modifier="quiet">Quiet</ons-button> <br> <br> <ons-button modifier="large">large</ons-button> <br> <ons-button modifier="large--cta">large--cta</ons-button> <br> <ons-button modifier="large--quiet">large--quiet</ons-button> <br> <ons-button disabled="true">Disabled</ons-button> </div>
</ons-page> <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/2.0.0-alpha.15/build/js/onsenui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/2.0.0-alpha.15/build/js/angular-onsenui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Buttons - Script Codes CSS Codes
ons-button[modifier="material"] { margin: 4px 0px;
}
Buttons - Script Codes JS Codes
ons.bootstrap() .controller("ButtonsController", function($scope) { $scope.spin1 = false; $scope.spin2 = false; $scope.spin3 = false; $scope.switchSpin1 = function() { $scope.spin1 = ($scope.spin1 == false); } $scope.switchSpin2 = function() { $scope.spin2 = ($scope.spin2 == false); } $scope.switchSpin3 = function() { $scope.spin3 = ($scope.spin3 == false); } });
Developer | Onsen & Monaca |
Username | onsen |
Uploaded | September 14, 2022 |
Rating | 3 |
Size | 2,051 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sliding Menu | 1,815 Kb |
Grid 1 | 2,267 Kb |
Dialog example | 2,630 Kb |
Alert, confirm and prompt dialogs | 2,083 Kb |
Navigator with Custom Animation | 1,832 Kb |
Split View | 1,952 Kb |
Many carousel items in a row | 1,714 Kb |
Modal | 1,782 Kb |
Text Input, Text Area, Search | 1,701 Kb |
Toolbar | 5,414 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Mario | Takaneichinose | 3,902 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Z-index demo | Kblh | 1,534 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Under construction | GhostRider | 1,642 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!