一个立体感的按钮样式

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

<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>

 

目录
相关文章
|
2月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
53 0
|
5月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
529 0
|
小程序 JavaScript
小程序鼠标点击按钮(改变背景颜色字体)
小程序鼠标点击按钮(改变背景颜色字体)
106 0
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
327 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
328 0
|
前端开发 数据安全/隐私保护
网页|利用提示框(Tooltip)实现弹窗效果
网页|利用提示框(Tooltip)实现弹窗效果
599 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【002】
「HTML+CSS」--自定义按钮样式【002】
120 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【004】
「HTML+CSS」--自定义按钮样式【004】
511 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【003】
「HTML+CSS」--自定义按钮样式【003】
125 0
|
前端开发 JavaScript
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
562 0