diff --git a/calendar/classes/external/footer_options_exporter.php b/calendar/classes/external/footer_options_exporter.php
index cc9ae2276cc..a5e6e4df798 100644
--- a/calendar/classes/external/footer_options_exporter.php
+++ b/calendar/classes/external/footer_options_exporter.php
@@ -69,12 +69,11 @@ class footer_options_exporter extends exporter {
     /**
      * Get the export calendar button.
      *
-     * @param renderer_base $output
-     * @return string The export calendar button html.
+     * @return \single_button The export calendar button html.
      */
-    protected function get_export_calendar_button(renderer_base $output) {
+    protected function get_export_calendar_button() {
         $exportcalendarurl = new moodle_url('/calendar/export.php', ['course' => $this->calendar->course->id]);
-        return $output->single_button($exportcalendarurl->out(false), get_string('exportcalendar', 'calendar'));
+        return new \single_button($exportcalendarurl, get_string('exportcalendar', 'calendar'));
     }
 
     /**
@@ -115,7 +114,8 @@ class footer_options_exporter extends exporter {
         $values = new stdClass();
 
         if (!empty($CFG->enablecalendarexport)) {
-            $values->exportcalendarbutton = $this->get_export_calendar_button($output);
+            $exportbutton = $this->get_export_calendar_button();
+            $values->exportcalendarbutton = $exportbutton->export_for_template($output);
             $values->managesubscriptionbutton = $this->get_manage_subscriptions_button($output);
             $values->icalurl = $this->get_ical_url($output)->out(false);
         }
diff --git a/calendar/templates/footer_options.mustache b/calendar/templates/footer_options.mustache
index d5371505caf..67e302e84d7 100644
--- a/calendar/templates/footer_options.mustache
+++ b/calendar/templates/footer_options.mustache
@@ -27,7 +27,9 @@
     }
 }}
 <div class="bottom">
-    {{{exportcalendarbutton}}}
+    {{#exportcalendarbutton}}
+        {{> core/single_button }}
+    {{/exportcalendarbutton}}
     {{{managesubscriptionbutton}}}
     <a href="{{icalurl}}" title="{{#str}} quickdownloadcalendar, calendar {{/str}}" class="ical-link m-l-1">iCal</a>
 </div>
diff --git a/lib/templates/single_button.mustache b/lib/templates/single_button.mustache
new file mode 100644
index 00000000000..9eca305943e
--- /dev/null
+++ b/lib/templates/single_button.mustache
@@ -0,0 +1,61 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/single_button
+
+    Moodle template for a single button submit form.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * classes - a list of classes to wrap the form.
+    * method - get or post
+    * url - the action url to submit to
+    * formid - optional id value for the form
+    * params - array of params with name and value attributes
+    * primary - true if this is a primary action button
+    * id - id for the element
+    * tooltip - tooltip text for the button
+    * disabled - true if this element is disabled
+    * label - text to show on the button
+
+    Example context (json):
+    { "method" : "get",
+      "url" : "#",
+      "primary" : true,
+      "tooltip" : "This is a tooltip",
+      "label" : "This is a the button text"
+    }
+}}
+<div class="{{classes}}">
+    <form method="{{method}}" action="{{url}}" {{#formid}}id="{{formid}}"{{/formid}}>
+        {{#params}}
+            <input type="hidden" name="{{name}}" value="{{value}}">
+        {{/params}}
+        <button type="submit" class="btn {{#primary}}btn-primary{{/primary}}{{^primary}}btn-default{{/primary}}"
+            id="{{id}}"
+            title={{#quote}}{{tooltip}}{{/quote}}
+            {{#disabled}}disabled{{/disabled}}>{{label}}</button>
+    </form>
+</div>
+{{#hasactions}}
+    {{> core/actions }}
+{{/hasactions}}