Skip to content

Instantly share code, notes, and snippets.

@osman-bashir
osman-bashir / NeumorphicButton.xaml
Created June 10, 2020 23:37
Full code for Neumorphic Button style.
<Window x:Class="Neumorphism.Neumorphism"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d">
<Grid x:Name="MainGrid" Background="#E0E5EC">
<Border x:Name="SurroundingBorder"
Height="100" Width="100" Cursor="Hand"
@osman-bashir
osman-bashir / IconAnimations.xaml
Created June 10, 2020 23:07
Icon animations.
<Border x:Name="OuterUpperBorder"
Height="90" Width="90" Cursor="Hand"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="#E0E5EC" BorderBrush="#E0E5EC"
BorderThickness="5" CornerRadius="7">
<Border.Effect>
...
</Border.Effect>
<Border.Triggers>
<EventTrigger RoutedEvent="MouseDown">
@osman-bashir
osman-bashir / NeumorphismWithIcon.xaml
Last active June 11, 2020 21:17
Neumorphism with material design icon.
<Grid x:Name="MainGrid" Background="#E0E5EC">
<Border x:Name="SurroundingBorder"
Height="100" Width="100" Cursor="Hand"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="Transparent" BorderBrush="#E0E5EC"
BorderThickness="5" CornerRadius="12">
<Grid x:Name="InnerGrid" Background="#E0E5EC">
...
</Grid>
</Border>
@osman-bashir
osman-bashir / NeumorphismAnimation.xaml
Created June 10, 2020 19:17
Neumorphic Button animations
<Border x:Name="OuterUpperBorder"
Height="90" Width="90" Cursor="Hand"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="#E0E5EC" BorderBrush="#E0E5EC"
BorderThickness="5" CornerRadius="7">
<Border.Effect>
<DropShadowEffect x:Name="OuterLightShadow" BlurRadius="12"
ShadowDepth="5" Direction="135"
Color="#FFFFFF" Opacity="0.8"/>
</Border.Effect>
@osman-bashir
osman-bashir / NeumorphismStyle.xaml
Last active June 10, 2020 23:35
Neumorphic Button style.
<Window x:Class="Neumorphism.Neumorphism"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="MainGrid" Background="#E0E5EC">
<Border x:Name="SurroundingBorder"
Height="100" Width="100" Cursor="Hand"
@osman-bashir
osman-bashir / InnerNeumorphism.xaml
Last active June 9, 2020 21:04
Inner Neumorphic Button Style.
<Grid x:Name="MainGrid" Background="#E0E5EC">
<Border x:Name="SurroundingBorder"
Height="100" Width="100" Cursor="Hand"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="Transparent" BorderBrush="#E0E5EC"
BorderThickness="5" CornerRadius="12">
<Grid x:Name="InnerGrid" Background="#E0E5EC">
<Border x:Name="InnerLowerBorder"
Height="100" Width="100" Cursor="Hand"
VerticalAlignment="Center" HorizontalAlignment="Center"
@osman-bashir
osman-bashir / OuterInnerNeumorphism.xaml
Last active June 11, 2020 20:44
Outer Inner Neumorphic Button Style.
<Window x:Class="Neumorphism.Neumorphism"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="InnerGrid" Background="#E0E5EC">
<Border x:Name="InnerLowerBorder"
Height="100" Width="100" Cursor="Hand"
@osman-bashir
osman-bashir / OuterNeumorphism.xaml
Last active June 9, 2020 20:38
Outer Neumorphic Button Style.
<Window x:Class="Neumorphism.Neumorphism"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Name="OuterGrid" Background="#E0E5EC">
<Border x:Name="OuterLowerBorder"
Height="90" Width="90" Cursor="Hand"