Templates.xml

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/
..\FrameXML\UI.xsd">

  <!-- /*******************/ CUSTOM TEMPLATES /*************************/ -->

  <!-- nice icon button template -->
  <Button name="KLR_IconButtonTemplate" virtual="true">
    <NormalTexture file="Interface\Buttons\UI-SquareButton-Up" desaturated="true">
      <Color r="0.75" g="0.75" b="0.75"/>
    </NormalTexture>
    <PushedTexture file="Interface\Buttons\UI-SquareButton-Down" desaturated="true">
      <Color r="0.75" g="0.75" b="0.75"/>
    </PushedTexture>
    <HighlightTexture file="Interface\Buttons\UI-Common-MouseHilight" alphaMode="ADD" alpha="0.75">
      <Anchors>
        <Anchor point="TOPLEFT" x="2" y="-2"/>
        <Anchor point="BOTTOMRIGHT" x="-2" y="2"/>
      </Anchors>
    </HighlightTexture>
  </Button>

  <Frame name="KLR_IconButtonPositionScripts" virtual="true">
    <!-- icon position adaptation scripts -->
    <Scripts>
      <OnMouseDown>
        <!-- nudge and dim the icon down a little -->
        local xOffset = -1;
        if (self.name == "UndoButton") then xOffset = -2; end

        local yOffset = -2;
        if (self.name == "UndoButton") then yOffset = -3; end
        if (self.name == "CategoryButton") then yOffset = -3; end

        self.Icon:SetPoint("CENTER", xOffset, yOffset) self.Icon:SetAlpha(0.5)
      </OnMouseDown>
      <OnMouseUp>
        <!-- reset the icon's position and opacity -->
        local xOffset = 0;
        if (self.name == "UndoButton") then xOffset = -0.5; end
        if (self.name == "CategoryButton") then xOffset = 0.5; end

        local yOffset = 0;
        if (self.name == "UndoButton") then yOffset = -0.5; end
        if (self.name == "CategoryButton") then yOffset = -1; end

        self.Icon:SetPoint("CENTER", xOffset, yOffset) self.Icon:SetAlpha(1)
      </OnMouseUp>
      <OnShow>
        <!-- reset the icon's position and opacity -->
        local xOffset = 0;
        if (self.name == "UndoButton") then xOffset = -0.5; end
        if (self.name == "CategoryButton") then xOffset = 0.5; end

        local yOffset = 0;
        if (self.name == "UndoButton") then yOffset = -0.5; end
        if (self.name == "CategoryButton") then yOffset = -1; end

        self.Icon:SetPoint("CENTER", xOffset, yOffset) self.Icon:SetAlpha(1)
      </OnShow>
    </Scripts>
  </Frame>

  <Frame name="KLR_IconButtonTooltipScripts" virtual="true">
    <Frames>
      <!-- small tooltip frame to describe use of the buttons -->
      <Frame parentKey="MiniTooltip" frameStrata="TOOLTIP" hidden="true">
        <Size x="0" y="26"/>
        <Layers>
          <Layer>
            <FontString parentKey="Text" inherits="GameFontNormalSmall"/>
          </Layer>
        </Layers>
      </Frame>
    </Frames>

    <!-- Tooltip associated scripts -->
    <Scripts>
      <OnLoad>
            self.MiniTooltip.Backdrop = CreateFrame("Frame", nil, self.MiniTooltip, "BackdropTemplate")
            self.MiniTooltip.Backdrop:SetAllPoints()
            self.MiniTooltip.Backdrop.backdropInfo = {
            	bgFile = "Interface\\ChatFrame\\ChatFrameBackground",
            	edgeFile = "Interface\\Tooltips\\UI-Tooltip-Border",
            	tile = true,
            	tileSize = 16,
            	edgeSize = 16,
            	insets = { left = 2, right = 2, top = 2, bottom = 2, },
            }
            self.MiniTooltip.Backdrop:ApplyBackdrop()
            self.MiniTooltip.Backdrop:SetBackdropColor(0.05, 0.05, 0.05, 1)
            self.MiniTooltip.Backdrop:SetBackdropBorderColor(0.5, 0.5, 0.5, 1)
            self.MiniTooltip.Backdrop:SetFrameStrata("DIALOG") -- lower strata than the text, so that is acts as a background (but over the other elements of the frame)
      </OnLoad>
      <OnEnter>
        <!-- Show and reposition the tooltip -->
        self.MiniTooltip.Text:SetText(self.tooltip)
        self.MiniTooltip:SetWidth(self.MiniTooltip.Text:GetStringWidth()+16)
        local _, n = string.gsub(self.tooltip, "\n", "")
        if (n > 0) then
          self.MiniTooltip:SetHeight(26 + n*10)
        else
          self.MiniTooltip:SetHeight(26)
        end
        if (self.name == "AddButton") then
          self.MiniTooltip:SetPoint("BOTTOMRIGHT", self, "TOPRIGHT", 4, 7)
        elseif (self.name == "TooltipResizeButton") then
          self.MiniTooltip:SetPoint("BOTTOMRIGHT", self, "BOTTOMLEFT", -5, 0)
        elseif (self.name == "ClearButton") then
          self.MiniTooltip:SetPoint("BOTTOM", self, "TOP", 0, 0)
        else
          self.MiniTooltip:SetPoint("RIGHT", self, "LEFT", 0, 0)
        end
        self.MiniTooltip:Show()
      </OnEnter>
      <OnLeave>
        <!-- Hide the tooltip -->
        self.MiniTooltip:Hide()
      </OnLeave>
    </Scripts>
  </Frame>


  <!-- Frame Options button -->
  <Button name="KLR_FrameOptionsButton" inherits="KLR_IconButtonTemplate, KLR_IconButtonTooltipScripts, KLR_IconButtonPositionScripts" virtual="true">
    <Size x="25" y="25"/>
    <KeyValues>
      <KeyValue key="tooltip" value="locale"/>
      <KeyValue key="name" value="FrameOptionsButton"/>
    </KeyValues>
    <Layers>
      <Layer level="OVERLAY">
        <Texture parentKey="Icon" file="Interface\BUTTONS\UI-GuildButton-OfficerNote-Up">
          <Size x="15" y="15"/>
          <Anchors>
            <Anchor point="CENTER"/>
          </Anchors>
        </Texture>
      </Layer>
    </Layers>
  </Button>

  <!-- Help button -->
  <Button name="KLR_HelpButton" inherits="InlineHyperlinkFrameTemplate, KLR_IconButtonTooltipScripts, KLR_IconButtonPositionScripts" virtual="true">
    <Size x="25" y="25"/>
    <KeyValues>
      <KeyValue key="tooltip" value="locale"/>
      <KeyValue key="name" value="HelpButton"/>
    </KeyValues>
    <Layers>
      <Layer level="OVERLAY">
        <Texture parentKey="Icon" file="Interface\COMMON\help-i">
          <Size x="32" y="32"/>
          <Anchors>
            <Anchor point="CENTER"/>
          </Anchors>
        </Texture>
      </Layer>
    </Layers>
  </Button>

  <!-- Close button -->
  <Button name="KLR_CloseButton" inherits="KLR_IconButtonTemplate, KLR_IconButtonPositionScripts" virtual="true">
    <Size x="25" y="25"/>
    <KeyValues>
      <KeyValue key="name" value="CloseButton"/>
    </KeyValues>
    <Layers>
      <Layer level="OVERLAY">
        <Texture parentKey="Icon" file="Interface\Buttons\UI-StopButton">
          <Size x="14" y="14"/>
          <Anchors>
            <Anchor point="CENTER"/>
          </Anchors>
        </Texture>
      </Layer>
    </Layers>
  </Button>

</Ui>