         class: 'math-button other square'
       }, opts)
 
-    square_root: (opts)->
+    exponent: (opts)->
+      base = opts.base || "x"
+      power = opts.power || "y"
       @button({
-        value: 'squareroot'
-        label: '&radic;<span>&#8212;</span>'
+        value: 'exponent'
+        label: "#{base}<sup>#{power}</sup>"
+        class: 'math-button other exponent'
+      }, opts)
+
+    root: (opts)->
+      degree = if opts.degree
+        "<div class='degree'>#{opts.degree}</div>"
+      else
+        ""
+      radicand = if opts.radicand
+        "<div class='radicand'>#{opts.radicand}</div>"
+      else
+        ""
+
+      @button({
+        value: 'root'
+        label: """
+          #{degree}
+          #{radicand}
+          <div class='radix'>&radic;</div>
+          <div class='vinculum'>&#8212;</div>
+        """
         class: 'math-button other square-root'
       }, opts)
+
+
+    numerator_denominator: (opts)->
+      @button({
+        value: 'numeratordenominator'
+        label: """
+          <div class='numerator'>a</div>
+          <div class='vinculum'>&#8212;</div>
+          <div class='denominator'>b</div>
+          """
+        class: 'math-button other numerator-denominator'
+      })
 
     lparen: (opts)->
       @button({

      @button({
        value: 'fn'
        label: '&fnof;'
        class: 'math-button other'
      }, opts)

    button: (type_opts, opts)->
      ui_elements.button_builder.build(
        _.extend({}, type_opts, @opts, opts || {}))

  class_mixer(ButtonBuilder)


        do (num)=>
          @button({
            value: "#{num}"
            class: 'math-button number-specifier number'
          }, opts)

    caret: (opts)->
      @button({
        value: '^'
        label: '&circ;'
        class: 'math-button other caret'
      }, opts)

    negative: (opts)->
      @button({
        value: 'negative'
        label: '(&ndash;)'
        class: 'math-button number-specifier negative'
      }, opts)

    negative_slash_positive: (opts)->
      @button({
        value: 'negative-slash-positive'
        label: "&ndash;/+"
        class: 'math-button number-specifier'
      }, opts)

    decimal: (opts)->
      @button({
        value: '.'
        class: 'math-button number-specifier decimal'
      }, opts)

    addition: (opts)->
