一个立体感的按钮样式

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

时间: 2024-08-03 20:24:31

一个立体感的按钮样式的相关文章

一个按钮样式测试出你的 css功力

简单点,bb的方式简单点.好的,大哥. 对于前端开发来说,css是必备的基本功.你可能会说css嘛,就那样,用的时候先这样,在这样.对我完全知道你在说什么,所以你可以认为css是很简单,因为我们涉及的都不深. 我们来看一段非常简单的代码(真的是非常的简单): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&quo

safari下按钮样式失效

这两天遇到一个问题,页面在安卓手机里面正常显示,但是在IOS里面按钮的样式完全失效了,一番了解之后才知道是 appearance属性 的原因. 在原来的样式里面加上一行"-webkit-appearance : none ;",IOS下的按钮样式立马显示出来了 #btn{width:80%; padding:2% 0; color:#fff; font-family: 'kaiti'; background:#F3AA3B; border:none;     -webkit-borde

完成FileUpload的文件上传功能,且可改按钮样式

FileUpload控件: 更改按钮样式思路: 自己定义一个按钮,设置该按钮的样式,然后将FileUpload控件通过定位定在自己定义的按钮上面,设置z-index,使得控件浮在自己定义的按钮上面,记得设置该控件为透明,这样,看着点的是自己定义的那个按钮,实际上点击的是控件,然后定义一个"上传"按钮,点击上传按钮时进入代码层: 上传文件思路: 1)确定上传文件所保存的路径: 2)判断路径是否存在,存在则继续,不存在则创建: 3)获取上传文件的上传路径 或者文件名 4)保存文件: 多文件

WPF自定义漂亮的按钮样式

首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮: 然后给各个按钮设置不同的背景颜色: 设置好之后就是这样啦: 然后我们就开始在 App.xaml 文件中定义按钮样式了: 定义的样式代码如下: 以下为引用的内容: <Application x:Class="WPFButton.App"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen

&lt;a&gt;按钮样式

网页上有很多功能是通过链接方式传递参数,这种功能链接普通样式就是一个超链接 退出,如果将超链接的样式变成按钮样式,给用户的感觉会更好. 一种方法是给a标签添加display:block的样式,并添加hover样式. <style type="text/css"> div.container { width: 600px; /*height: 200px;*/ border-bottom: 2px solid green; padding: 10px; } .containe

Android动态生成按钮样式

动态生成按钮样式 使用: int borderColor = Color.parseColor("#2E3135"); int bgColor = Color.parseColor("#00FF00"); // 设置View背景样式,有边框宽度.边框颜色.圆角度数.背景颜色. GradientDrawable shape = DrawableUtils.createShape(1, 4, borderColor, bgColor); btn1.setBackgrou

一个有意思的CSS样式库--BUTTONS

我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/buttons/ 接下来介绍怎么使用这个CSS样式库,如上图,进入网址后,点击下载,会出现一个全是代码的网页,然后鼠标右键点击全选,复制,这里的代码就是这个BUTTONS的CSS样式代码, 再接下来就是在你的编辑器中创建一个css文件,然后将所复制的代码全部粘贴上去即可,然后就可以编写你的HTML代码

【全网最全的博客美化系列教程】07.添加一个分享的按钮吧

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

设置警告框为带有一个密文输入框的样式,并设置输入框键盘为数字键盘;判断密文输入框里的内容,并弹出相应提示

项目需求 废话不说,直接上试题 及答案 代码 #import "TableViewController.h" @interface TableViewController ()<UIAlertViewDelegate> @property (nonatomic, strong) NSMutableArray * dataSource; - (IBAction)buy:(id)sender; @end @implementation TableViewController -