Skip to main content

Button Examples

Here are some button examples that you can use in your custom games.

Example 1 - Default Valve Button​

Here is the button that valve mostly uses for Dota 2. (Valve mostly recolor them for different uses: Green for Store, Gold-ish for Dotaplus etc.)

https://i.imgur.com/fZyO9sA.png

XML:

<TextButton id="DefaultValveButtonID" class="DefaultValveButtonClass" text="#DefaultValveButton"/>

CSS:

#DefaultValveButtonID
{
    horizontal-align: center;
    vertical-align: bottom;
    margin-bottom: 20px;
    box-shadow: black -4px -4px 8px 8px;
    margin-top: 20px;
}
.DefaultValveButtonClass
{
    width: 270px;
    
    min-width: 192px;
    min-height: 36px;
    
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #373d45 ), to( #4d5860 ) );
    border-style: solid;
    border-width: 1px;
    
    padding: 4px 10px;
    
    border-top-color: #555555;
    border-left-color: #494949;
    border-bottom-color: #333333;
    border-right-color: #404040;
    
    transition-property: background-color;
    transition-duration: 0.05s;
    transition-timing-function: linear;
}
.DefaultValveButtonClass Label
{
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: center;
    horizontal-align: center;
    vertical-align: middle;
    text-shadow: 2px 2px 0px 1.0 #000000;
    
    transition-property: color;
    transition-duration: 0.35s;
    transition-timing-function: ease-in-out;
    
    font-size: 18px;
    font-family: defaultFont;
}
.DefaultValveButtonClass:hover
{
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #4c5561 ), to( #6c7d88 ) );
    border-top-color: #aaaaaa77;
    border-left-color: #aaaaaa33;
    border-bottom-color: #333333;
    border-right-color: #404040;
}
.DefaultValveButtonClass:active
{
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #393939), to( #555555 ) );
    border-top-color: #222222;
    border-left-color: #303030;
    border-bottom-color: #666666;
    border-right-color: #444444;
    sound: "ui_generic_button_click";
}

Example 2 - Purple Button​

https://i.imgur.com/uZKACHo.png

XML:

<Button id="ExampleButton1">
  <Label class="ExampleButton1Label" text="#Click"/>
</Button>

CSS:

#ExampleButton1
{
    width: 330px;
    min-height: 36px;
    box-shadow: #F78F9015 -4px -4px 8px 8px;
    background-color: black;
    border: 1px solid #aaaaaa;
    horizontal-align: right;
    vertical-align: bottom;
    margin-bottom: 20px;
    margin-top: 8px;
    margin-left: 32px;
    margin-right: 32px;
    padding: 0px;
    flow-children: down;
    background-image: url("s2r://panorama/images/textures/glassbutton_darkmoon_hover_psd.vtex");
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition-property: box-shadow, background-image, background-color;
    transition-duration: .16s;
    transition-timing-function: ease-in-out;
    border-radius: 6px;
}
#ExampleButton1:hover
{
    background-image: url("s2r://panorama/images/textures/glassbutton_darkmoon_psd.vtex");
    box-shadow: fill transparent 0px 0px 0px 0px;
    border: 1px solid #555555;
}
.ExampleButton1Label
{
    width: 100%;
    text-align: center;
    margin-top: 3px;
    font-size: 20px;
    font-weight: thin;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    color: grey;
}

Example 3 - Text Button with Icon​

You can add icon to your button -in this case, it is sized 26x26px default dota 2 logo- to make it look better.

https://i.imgur.com/Fe5MiGc.png

XML:

<Button id="ExampleButton2ID" class="ExampleButton2Class">
  <Panel class="Contents">
    <Panel class="CustomIcon"/>
    <Label id="ExampleButton2Label" text="#ExampleButton"/>
  </Panel>
</Button>

CSS:

#ExampleButton2ID
{
    horizontal-align: center;
    vertical-align: bottom;
    margin-bottom: 22px;
}
.ExampleButton2Class
{
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #6b211c ), to( #8e2b19 ) );
    border: 1px solid #bc4539;
    
    transition-property: border, brightness;
    transition-duration: 0.1s;
    transition-timing-function: linear;
    overflow: noclip;
    min-width: 300px;
    min-height: 45px;
}
.Contents
{
    horizontal-align: center;
    vertical-align: middle;
    flow-children: right;
    margin: 0px 20px;
}
.CustomIcon 
{
    background-image: url("s2r://panorama/images/control_icons/dota_logo_white_png.vtex");
    background-size: contain;
    width: 26px;
    height: 26px;
    margin-top: 4px;
    margin-right: 4px;
    horizontal-align: center;   
    vertical-align: middle;
}
.ExampleButton2Class:hover
{
    brightness: 2;
}
.ExampleButton2Class:hover Label
{
    color: white;   
}
.ExampleButton2Class:active
{
    brightness: 3;
    border: 1px solid #501F18;
    
    sound: "ui_generic_button_click";
}
.ExampleButton2Class Label
{
    margin-top: 2px;
    text-transform: uppercase;
    color: white;
    horizontal-align: center;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    text-shadow: 0px 0px 6px 1.0 #000000;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    
    
    transition-property: color;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}
.ExampleButton2Class:active Label 
{
    transform: translateY(1px);
}

Example 4 - Popup ESC Menu Buttons​

https://i.imgur.com/v9LFLaw.png

XML:

<Panel id="PopupESCMenu">
  <Panel id="ESCActionButtons">
    <Button id="ESCResumeButton" class="ButtonBevel ESCMenuButton">
      <Label text="RESUME" />
    </Button>
    <Button id="ESCOptionsButton" class="ButtonBevel ESCMenuButton">
      <Label text="OPTIONS" />
    </Button>
    <Button id="ESCTestButton" class="ButtonBevel ESCMenuButton">
      <Label text="TEST" />
    </Button>
    <Button id="ESCExitButton" class="ButtonBevel ESCMenuButton">
      <Label text="EXIT" />
    </Button>
  </Panel>
</Panel>

CSS:

#PopupESCMenu {
    width: 350px;
    vertical-align: center;
    horizontal-align: center;
    opacity: 1.0;
    transform: none;
    
    transition-property: opacity, transform, pre-transform-scale2d, wash-color;
    transition-duration: 0.4s;
    transition-delay: 0.0s;
    transition-timing-function: ease-in-out;
    box-shadow: #00000099 -4px -4px 8px 8px;
    flow-children: down;
    padding: 2px;
    background-image: url("file://{images}/custom_game/interface/esc_bg_psd.png");
    background-position: center top;
    background-color: none;
}
#ESCActionButtons {
    flow-children: down;
    width: fit-children;
    horizontal-align: center;
}
.ButtonBevel {
    width: 270px;
    min-width: 192px;
    min-height: 36px;
    
    margin-top: 8px;
    margin-bottom: 6px;
    
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #373d45 ), to( #4d5860 ) );
    border-style: solid;
    border-width: 1px;
    
    padding: 4px 10px;
    
    border-top-color: #555555;
    border-left-color: #494949;
    border-bottom-color: #333333;
    border-right-color: #404040;
    
    transition-property: background-color;
    transition-duration: 0.05s;
    transition-timing-function: linear;
    box-shadow: #00000055 -2px -2px 4px 4px;
}
.ESCMenuButton {
    margin-top: 8px;
    margin-bottom: 6px;
    width: 270px;
}
#ESCResumeButton {
    background-color: #589c5e33;
}
#ESCResumeButton:hover {
    opacity: 1.3;
}
.ESCMenuButton Label
{
    font-weight: normal;
    color: gradient( linear, 0% 0%, 0% 100%, from( #eaeaea ), to( #ababab) );
}