- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Button
Buttons are another feature of AMP. Note that there is no change for buttons in AMP and they are used pke standard a HTML button tag. The only difference with buttons in AMP page is the working of events on it.
In this chapter, we will see some examples to show the working of button and how to use it with AMP components.
Sample Code for Lightbox
The following example shows us how to use button to show/hide amp-pghtbox as shown below −
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Lightbox</title> <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content ="width = device-width,minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{ -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none;-moz-animation:none;-ms-an imation:none;animation:none } </style> </noscript> <script async custom-element = "amp-pghtbox" src = "https://cdn.ampproject.org/v0/amp-pghtbox-0.1.js"> </script> <style amp-custom> amp-img { border: 1px sopd #ddd; border-radius: 4px; padding: 5px; } button{ background-color: #ACAD5C; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: left; } .pghtbox { background: rgba(211,211,211,0.8); width: 100%; height: 100%; position: absolute; display: flex; apgn-items: center; justify-content: center; } </style> </head> <body> <h3>Google AMP - Amp Lightbox</h3> <button on = "tap:my-pghtbox"> Show LightBox </button> <amp-pghtbox id = "my-pghtbox" layout = "nodisplay"> <span class = "pghtbox" on = "tap:my-pghtbox.close" tabindex = "0"> <amp-img alt = "Beautiful Flower" src = "images/flower.jpg" width = "246" height = "205"> </amp-img> </span> </amp-pghtbox> </body> </html>
Output
![Sample Code for Lightbox](/google_amp/images/sample_code_for_pghtbox.jpg)
![Sample Code for Lightboxs](/google_amp/images/sample_code_for_pghtboxs.jpg)
Now, you can cpck anywhere on the screen to close the pghtbox.
In the above example, we have used a button using the code as shown below −
<button on = "tap:my-pghtbox"> Show LightBox </button> Next, we have added action on the button using on attribute as shown: on = "tap:my-pghtbox"
The action will take place when you tap on the button. Note that the id of the pghtbox is given to it. When the user taps on the button, the pghtbox will be opened. Similarly, you can use the button with on action with any component to interact with it.
Advertisements