漂亮的按钮样式-button

最新推荐文章于 2021-08-02 15:08:20 发布
最新推荐文章于 2021-08-02 15:08:20 发布
阅读量147 收藏
点赞数
文章标签： c#
原文链接：http://www.cnblogs.com/shyyj/archive/2012/02/09/2344137.html
版权

 <Style x:Key="buttonVSM" TargetType="{x:Type Button}">
        <!--  定义样式属性  -->
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Template">
            <Setter.Value>
                <!--  定义控件模板  -->
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="RootElement"
                            Width="Auto"
                            Height="24"
                            HorizontalAlignment="Stretch"
                            BorderBrush="#FF939393"
                            BorderThickness="1"
                            CornerRadius="2">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop x:Name="stop1" Offset="0" Color="#FFF4F4F4" />
                                <GradientStop x:Name="stop2" Offset="1" Color="#FFF4F4F4" />
                                <GradientStop x:Name="stop3" Offset="0.483" Color="#FFF4F4F4" />
                                <GradientStop x:Name="stop4" Offset="0.608" Color="#FFF4F4F4" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <!--  视觉状态管理组  -->
                        <sw:VisualStateManager.VisualStateGroups>
                            <sw:VisualStateGroup>
                                <!--  按钮普通状态  -->
                                <sw:VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(BorderThickness)">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="0" />
                                        </ThicknessAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(CornerRadius)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <CornerRadius>2</CornerRadius>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop1" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="Transparent" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop2" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#00FBFBFB" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop4" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#00C0E6E9" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop3" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#00CDEBEE" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#00000000" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </sw:VisualState>
                                <!--  鼠标经过按钮的状态  -->
                                <sw:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.CornerRadius)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <CornerRadius>2</CornerRadius>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.BorderThickness)">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="1" />
                                        </ThicknessAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop2" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF92E4F1" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop1" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FDA7E0E9" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFF7D639" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop3" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFEFF3F3" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop4" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFD5F1F3" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCE58C" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCE58C" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCE58C" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCE58C" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </sw:VisualState>
                                <!--  按钮按下状态  -->
                                <sw:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop2" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF99D7DC" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.CornerRadius)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <CornerRadius>2</CornerRadius>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.BorderThickness)">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="1" />
                                        </ThicknessAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="stop1" Storyboard.TargetProperty="Color">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFF7F9F9" />
                                        </ColorAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="stop3" Storyboard.TargetProperty="Offset">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.487" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFF7D639" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCE58C" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCE38A" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCF9E0" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFFCF9E0" />
                                        </ColorAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Offset)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.678" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.97" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </sw:VisualState>
                            </sw:VisualStateGroup>
                        </sw:VisualStateManager.VisualStateGroups>
                        <!--  显示按钮文本  -->
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Content="{TemplateBinding Content}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

 

在页面中运用：

 <Button Content="添加新规则" x:Name="button_Add" Style="{StaticResource ResourceKey=buttonVSM}" >  </Button>

转载于:https://www.cnblogs.com/shyyj/archive/2012/02/09/2344137.html

weixin_33850890
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮的Button按钮样式
鱼忘七秒的博客
08-02 6万+
开发中各种样式的Button，其实这些样式所有的View都可以共用的，可能对于你改变的只有颜色 所有的都是用代码实现   边框样式，给你的View加上边框 &lt;Button android:layout_width="0dip" android:layout_height="match_parent" android:lay...
好看的button样式
01-03
分享50个CSS超炫丽button样式代码下载分享50个CSS超炫丽button样式代码下载
几个漂亮的 button 样式
WaterShuiMiao的专栏
06-22 1229
<style>  02.btn   {  03  BORDER-RIGHT:   #7b9ebd   1px   solid;   PADDING-RIGHT:   2px;   BORDER-TOP:   #7b9ebd   1px   solid;   PADDING-LEFT:   2px;   FONT-SIZE:   12px;   FILTER:   progid:DXImageTransform.Microsoft.Gradient(GradientType=0,   StartColorSt
【前端系列】36种button样式
热门推荐
檀越的博客
11-17 4万+
3.button 种类 "Button"可以指多种不同类型的按钮，以下是其中的一些：以下是一些 HTML 中设置按钮样式的常用方法：1.使用 CSS 样式表：可以通过 CSS 样式表来设置按钮的外观，例如设置按钮的背景色、字体颜色、边框等。 2.使用内联样式：可以在按钮标签中使用 style 属性来设置按钮的样式。 3.使用类名：可以为按钮设置一个类名，然后在 CSS 样式表中设置该类名的样式。 觉得有用的话点个赞 呗。
36种好看的按钮
weixin_45932157的博客
11-28 3789
@{ ViewBag.Title = "anniu"; } <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="text/css"> body { background:
微信小程序中添加客服按钮contact-button功能
08-27
添加悬浮客服按钮需要使用WXSS样式来设置按钮的样式。首先，我们需要在wxss文件中添加以下代码： ``` .kf_button { background-color: rgba(255, 255, 255, 0); border: 0px; height: 100rpx; right: 0; bottom...
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
10-17
在Element UI框架中，`el-button`组件是一个常用的按钮组件，提供多种预设样式和功能。然而，在实际项目中，我们可能需要自定义按钮的颜色和图标以满足特定的设计需求。本篇文章将详细介绍如何在`el-button`组件中...
react-scroll-up-button：用于固定滚动到顶部按钮的React Component
02-03
我还添加了许多不同的样式按钮，您可以将其复制并粘贴到此组件中，以快速实现可以欣赏并适合您的网站外观的样式。演示版安装npm install react-scroll-up-button用法默认按钮： import React from " react " ;...
admin-button:简单的蓝色大按钮管理界面
06-24
2. **自定义组件**：开发者可能创建了一个自定义的按钮类，继承自Java的基础Button类，增加了特定的样式（如蓝色背景）和行为。 3. **CSS/JavaFX样式**：如果使用JavaFX，可能会使用CSS来定义按钮的外观，包括颜色、...
[转] 按钮样式
anole2012的博客
06-19 292
CSS3 按钮   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;hea...
36种漂亮的网页Button按钮样式
06-09
36种漂亮的网页Button按钮样式
多种好看的按钮
02-14
所上传的文件里面，有很多种labview的好看图标，直接复制使用
超漂亮的CSS 按钮 button
10-05
超漂亮的CSS 按钮 button
好看的button样式CSS
09-01
好看的button样式CSS,你值得下载，
样式Button,好看的Button
06-13
好看的Button 好看的Button 好看的Button 好看的Button
button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
weixin_39889544的博客
11-28 856
写在前面最近忙着实习的事，前往广州，租房，置办东西等等。用碎片化的时间看了一些博客，也看到不少我认为很不错的通过纯css来打造的按钮样式。记录下来以后开发的时候或许能用上。亮起来按钮<简单来分析一下，外层一个div框住三个按钮进行展示，通过flex布局让其并排，再调整justify-content属性来达到居中展示。分配好之后，分别上色。之后就是最重要的CSS :hover 选择器，以第一个...
button 样式_（收藏）漂亮的css button样式汇总
weixin_39708502的博客
11-28 4857
在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。下面我们就给大家介绍一些好看的button样式，大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片，可以直接复制代码就可以了！web前端学习：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新...
非常漂亮而且很实用的button按钮效果
08-02 509
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u.
如何把设置为按钮el-button设置为绿色
最新发布
06-06
要将 `el-button` 按钮设置为绿色，您可以通过 `background-color` 属性设置按钮的背景颜色。可以在 CSS 中添加以下样式： ```css .el-button { background-color: green; } ``` 您也可以在标签上直接使用 `style...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值