Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm trying to create a button that has an image in it and no border - just like the Firefox toolbar buttons before you hover over them and see the full button.

I've tried setting the BorderBrush to Transparent , BorderThickness to 0 , and also tried BorderBrush="{x:Null}" , but you can still see the outline of the button.

You may have to change the button template, this will give you a button with no frame what so ever, but also without any press or disabled effect:

    <Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Transparent">
                        <ContentPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
And the button:
<Button Style="{StaticResource TransparentStyle}"/>
                I don't know why other solutions seems to work at other people. This solution is the only one which can work because the ContentPresenter Border line is also removed! Good work!
– Nasenbaer
                Apr 9, 2013 at 21:06
                I tried several other solutions, this is the only one works. btw, for newbies, the <style></style> code should be in the header of your xaml like in <Window><Window.Resource><Style>....
– Felix
                Jul 17, 2013 at 5:41
                also, there is a typo in the answer: <Button Style="{StaticResource TransparentButton}"/> should be <Button Style="{StaticResource TransparentStyle}"/>
– Felix
                Jul 17, 2013 at 5:45
                This works perfectly when you want to stretch an image inside a button. Removing the padding lets the image occupy the full button dimensions.
– visc
                Aug 2, 2017 at 16:30
I don't know why others haven't pointed out that this question is duplicated with this one with accepted answer.
I quote here the solution: You need to override the ControlTemplate of the Button:
<Button Content="save" Name="btnSaveEditedText" 
                Background="Transparent" 
                Foreground="White" 
                FontFamily="Tw Cen MT Condensed" 
                FontSize="30" 
                Margin="-280,0,0,10"
                Width="60"
                BorderBrush="Transparent"
                BorderThickness="0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
             <ContentPresenter Content="{TemplateBinding Content}"/>
        </ControlTemplate>
    </Button.Template>  
</Button>
                If you don't put any content inside the button it will not respond to clicks. You can fix that by wrapping that ContentPresenter in a Border with a transparent background.  That way you can make a blank/transparent button of any size to place over an image.
– bj0
                Oct 8, 2013 at 19:01
                I like this solution. It's a nice trick, gives you a hand cursor on hover and doesn't require to use a custom style.
– Martin Braun
                Dec 29, 2021 at 23:02
You may already know that putting your Button inside of a ToolBar gives you this behavior, but if you want something that will work across ALL current themes with any sort of predictability, you'll need to create a new ControlTemplate.
Prashant's solution does not work with a Button not in a toolbar when the Button has focus.  It also doesn't work 100% with the default theme in XP -- you can still see faint gray borders when your container Background is white.
Why don't you set both Background & BorderBrush by same brush
 <Style TargetType="{x:Type Button}" >
        <Setter Property="Background" Value="{StaticResource marginBackGround}"></Setter>
        <Setter Property="BorderBrush" Value="{StaticResource marginBackGround}"></Setter>            
 </Style>
<LinearGradientBrush  x:Key="marginBackGround" EndPoint=".5,1" StartPoint="0.5,0">
    <GradientStop Color="#EE82EE" Offset="0"/>
    <GradientStop Color="#7B30B6" Offset="0.5"/>
    <GradientStop Color="#510088" Offset="0.5"/>
    <GradientStop Color="#76209B" Offset="0.9"/>
    <GradientStop Color="#C750B9" Offset="1"/>
</LinearGradientBrush>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.