<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://DOMAIN.COM/amp-helper-frame.html"
permission-dialog-url="https://DOMAIN.COM/amp-permission-dialog.html"
service-worker-url="https://DOMAIN.COM/serviceworker_amp.js?app_id=Workspace_ID"
></amp-web-push>

<div class="web-push">
<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
&lt;/amp-web-push-widget&gt;
&lt;!-- An unsubscription widget --&gt;
&lt;amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="45"&gt;
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
&lt;/amp-web-push-widget&gt;
&lt;/div&gt;

<style amp-custom>
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 2px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 10px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: #4A90E2;
color: white;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
amp-web-push-widget button.subscribe:active {
transform: scale(0.9);
}
amp-web-push-widget button.unsubscribe {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
border: 0;
margin: 0;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: transparent;
color: #B1B1B1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #eee;
border-radius: 2px;
}
amp-web-push-widget button.unsubscribe:active {
transform: scale(0.9);
}
</style>