fix: make action buttons more visible

Author: wuda-io

css-transitions.html

@@ -23,7 +23,9 @@ <h5>Scale</h5>
                 <code class="language-html">scale-in</code> to scale the element up until it is shown.
               </p>
               <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition"><i class="material-icons">add</i></a>
-              <a id="scale-demo-trigger" href="#!" class="btn right">Toggle Scale</a>
+
+              <a id="scale-demo-trigger" href="#!" class="btn tonal">Toggle Scale</a>
+
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>

feature-discovery.html

@@ -18,8 +18,8 @@
                 wrong time, they can be intrusive and annoying.
               </p>
 
-              <a class="waves-effect waves-light btn" id="open-taptarget">Open tap target</a>&nbsp;&nbsp;&nbsp;&nbsp;
-              <a class="waves-effect waves-light btn" id="close-taptarget">Close tap target</a>
+              <a class="waves-effect waves-light btn tonal" id="open-taptarget">Open tap target</a>&nbsp;&nbsp;&nbsp;&nbsp;
+              <a class="waves-effect waves-light btn tonal" id="close-taptarget">Close tap target</a>
 
               <div class="fixed-action-btn" style="bottom: 45px; right: 24px">
                 <a class="btn btn-floating btn-large" id="menu">

grid.html

@@ -154,7 +154,7 @@ <h3 class="header">Container</h3>
 
                 <h5>Demo</h5>
                 <p>Try the button below to see what the page looks like without containers.</p>
-                <a id="container-toggle-button" class="btn waves-effect waves-light">Turn off Containers</a>
+                <a id="container-toggle-button" class="btn tonal waves-effect waves-light">Turn off Containers</a>
 
                 <!-- Container Visual Demo -->
                 <div class="row">

modals.html

@@ -16,7 +16,9 @@
                 of the trigger. To add a close button, just add the class
                 <code class="language-css">.modal-close</code> to your button.
               </p>
-              <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
+
+              <a class="waves-effect waves-light btn tonal modal-trigger" href="#modal1">Show Modal</a>
+
               <div id="modal1" class="modal">
                 <div class="modal-content">
                   <h4>Modal Header</h4>
@@ -340,7 +342,9 @@ <h4>Modal Header</h4>
 
             <div id="bottom-sheet" class="scrollspy section">
               <h3 class="header">Bottom Sheet Modals</h3>
-              <a class="waves-effect waves-light btn modal-trigger" href="#modal3">Modal Bottom Sheet Style</a>
+
+              <a class="waves-effect waves-light btn tonal modal-trigger" href="#modal3">Show BottomSheet Modal</a>
+
               <p>Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.</p>
               <pre><code class="language-html">
 <xmp>

parallax.html

@@ -16,7 +16,10 @@
                 Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the
                 demo to get a better idea of it.
               </p>
-              <a href="parallax-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>
+
+              <a href="parallax-demo.html" target="_blank" class="btn tonal waves-effect waves-light">Open Parallax Demo</a>
+
+              <p>Exlore an example website with the parallax effect applied.</p>
             </div>
             <pre><code class="language-html">
 <xmp>

pushpin.html

@@ -16,7 +16,7 @@
                 contents on the right.
               </p>
 
-              <a href="pushpin-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>
+              <a href="pushpin-demo.html" target="_blank" class="btn tonal waves-effect waves-light">Open Pushpin Demo</a>
 
               <h5>Demo Code</h5>
               <pre><code class="language-javascript">

sidenav.html

@@ -20,7 +20,7 @@
           <strong>Please note that the sidenav HTML should not be contained within the navbar HTML.</strong>
         </p>
 
-        <a href="#" data-target="slide-out" class="sidenav-trigger btn">Side nav demo</a>
+        <a href="#" data-target="slide-out" class="sidenav-trigger btn tonal">Toggle Sidenav</a>
 
         <ul id="slide-out" class="sidenav">
           <li>

toasts.html

@@ -15,15 +15,15 @@
                 Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by
                 clicking the button below on different device sizes.
               </p>
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({text: 'I am a toast', classes: 'primary'})">Toast!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({text: 'I am a toast', classes: 'primary'})">Show Toast</button>
               <p>To do this, call the M.toast() function programmatically in JavaScript.</p>
               <pre><code class="language-javascript">
   M.toast({text: 'I am a toast!'})
         </code></pre>
               <p>One way to add this into your application is to add this as an onclick event to a button.</p>
               <pre><code class="language-html">
 <xmp>
-<button type="button" onclick="M.toast({text: 'I am a toast'})" class="btn">Toast!</button>
+<button type="button" onclick="M.toast({text: 'I am a toast'})" class="btn tonal">Show Toast</button>
 </xmp>
         </code></pre>
             </div>
@@ -135,18 +135,18 @@ <h3 class="header">Properties</h3>
             <div id="custom-html" class="section scrollspy">
               <h3 class="header">Custom HTML</h3>
               <p>You can pass in an toastId as the argument as well. This toastId should refer to some template in the HTML that will be used as toast content.</p>
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({toastId: 'my-toast-1'})">Show Toast 1</button>
               <template id="my-toast-1">
                 <div>
                   This is toast nº1 with a
                   <a href="https://github.com/materializecss"> link </a>
                 </div>
               </template>
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({toastId: 'my-toast-2', classes: 'primary'})">Toast 2!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({toastId: 'my-toast-2', classes: 'primary'})">Show Toast 2</button>
               <div id="my-toast-2" style="display: none">This is toast nº2 with a <i class="material-icons icon-demo">insert_chart</i></div>
               <pre><code class="language-html">
 <xmp>
-<button type="button" class="btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
+<button type="button" class="btn tonal" onclick="M.toast({toastId: 'my-toast-1'})">Show Toast 1</button>
 <template id="my-toast-1">
   <div>
     This is toast nº1 with a  <a href="https://github.com/materializecss"> link </a>
@@ -158,9 +158,9 @@ <h3 class="header">Custom HTML</h3>
             <div id="callback" class="scrollspy section">
               <h3 class="header">Callback</h3>
               <p>You can have the toast callback a function when it has been dismissed.</p>
-              <button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
+              <button type="button" class="btn tonal" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Show Toast</button>
               <pre><code class="language-html">
-  <button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
+  <button type="button" class="btn tonal" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Show Toast</button>
         </code></pre>
             </div>
 
@@ -171,7 +171,7 @@ <h3 class="header">Styling Toasts</h3>
                 you, but you can create your own CSS classes and apply them to toasts. Checkout out our full example below.
               </p>
 
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({text: 'I am a toast!', classes: 'rounded'})">Round Toast!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({text: 'I am a toast!', classes: 'rounded'})">Show round Toast</button>
 
               <pre><code class="language-javascript">
   // 'rounded' is the class I'm applying to the toast

tooltips.html

@@ -18,17 +18,17 @@
               </p>
 
               <div>
-                <a href="#" class="btn tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
+                <a href="#" class="btn tonal tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
                 <div id="tooltip-content" style="display: grid; align-content: center">
                   This is a tooltip with a
                   <a href="https://github.com/materializecss">link</a> and a
                   <i class="material-icons icon-demo">insert_chart</i>
                 </div>
-                <a href="#" class="btn tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
-                <a href="#" class="btn tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
+                <a href="#" class="btn tonal tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
+                <a href="#" class="btn tonal tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
                 <a
                   href="#"
-                  class="btn tooltipped"
+                  class="btn tonal tooltipped"
                   data-position="right"
                   data-tooltip="I am a right tooltip. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus possimus quidem voluptatem soluta ex dignissimos, itaque magnam aspernatur eum deleniti delectus, vitae rerum, distinctio quam? Quas sapiente sunt blanditiis?"
                 >