一个立体感的按钮样式

简介: 原文:一个立体感的按钮样式 ...
原文: 一个立体感的按钮样式

<Style TargetType="ToggleButton">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="ToggleButton">
				<Border BorderBrush="#EFEFEF" BorderThickness="6" CornerRadius="35">
					<Border.Background>
						<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
							<GradientStop Offset="0" Color="#E24E59" />
							<GradientStop Offset="0.1" Color="#FA5A62" />
							<GradientStop Offset="0.9" Color="#FA5A62" />
							<GradientStop Offset="1" Color="#E24E59" />
						</LinearGradientBrush>
					</Border.Background>
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="auto" />
							<ColumnDefinition Width="*" />
						</Grid.ColumnDefinitions>
						<Grid Width="110" Margin="0" HorizontalAlignment="Left">
							<Border Margin="-0.5" CornerRadius="32">
								<Border.Effect>
									<DropShadowEffect BlurRadius="20" Direction="270" Opacity="0.6" ShadowDepth="2"
													  Color="Brown" />
								</Border.Effect>
								<Border.Background>
									<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
										<GradientStop Offset="0" Color="#F7F7F7" />
										<GradientStop Offset="1" Color="#D2D2D2" />
									</LinearGradientBrush>
								</Border.Background>
							</Border>
							<Border Width="30" Height="30" Margin="0,0,10,0" HorizontalAlignment="Right"
									BorderThickness="5" CornerRadius="100">
								<Border.Background>
									<RadialGradientBrush GradientOrigin="0.5, 0.5">
										<GradientStop Offset="0" Color="#FA5A62" />
										<GradientStop Offset="0.55" Color="#FA5A62" />
										<GradientStop Offset="1" Color="#E24E59" />
									</RadialGradientBrush>
								</Border.Background>
								<Border.BorderBrush>
									<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
										<GradientStop Offset="0" Color="#CBD5D1" />
										<GradientStop Offset="1" Color="#EFEFE1" />
									</LinearGradientBrush>
								</Border.BorderBrush>
							</Border>
						</Grid>
						<TextBlock Grid.Column="1" Text="OFF" HorizontalAlignment="Center" VerticalAlignment="Center"
								   Foreground="#BE3A3A"/>
					</Grid>
				</Border>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
<Grid Background="#222222">
	<Viewbox Width="400">
		<ToggleButton Width="190" Height="70" />
	</Viewbox>
</Grid>

 

目录
相关文章
|
8月前
|
前端开发 定位技术
layer弹框右上角关闭按钮的样式
layer弹框右上角关闭按钮的样式
126 0
|
2月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
30 0
|
8月前
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
147 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
291 0
「HTML+CSS」--自定义按钮样式【001】
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【002】
「HTML+CSS」--自定义按钮样式【002】
93 0
「HTML+CSS」--自定义按钮样式【002】
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【004】
「HTML+CSS」--自定义按钮样式【004】
479 0
「HTML+CSS」--自定义按钮样式【004】
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【003】
「HTML+CSS」--自定义按钮样式【003】
100 0
「HTML+CSS」--自定义按钮样式【003】
|
前端开发 JavaScript
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
434 0
|
前端开发 JavaScript
界面按钮样式丑?不可能!16款css实现炫酷按钮
界面按钮样式丑?不可能!16款css实现炫酷按钮
299 0
界面按钮样式丑?不可能!16款css实现炫酷按钮