一组很棒的button样式

最新推荐文章于 2022-08-13 23:18:30 发布
最新推荐文章于 2022-08-13 23:18:30 发布
阅读量2.9k 收藏 4
点赞数
分类专栏： html css 文章标签： button filter class c function null
html 同时被 2 个专栏收录
8 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

<style>
    .btn {
     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, 
    StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #7b9ebd 1px solid
    }
    .btn1_mouseout {
     BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
    #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
    progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
    StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #7EBF4F 1px solid
    } 
    .btn1_mouseover {
     BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
    #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
    progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
    StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #7EBF4F 1px solid
    } 
    .btn2 {padding: 2 4 0 
    4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
    .btn3_mouseout {
     BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
    #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
    progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
    StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #2C59AA 1px solid
    } 
    .btn3_mouseover {
     BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
    #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
    progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
    StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #2C59AA 1px solid
    }
    .btn3_mousedown
    {
     BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
    #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
    progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
    StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #FFE400 1px solid
    } 
    .btn3_mouseup {
     BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
    #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
    progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
    StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #2C59AA 1px solid
    } 
    .btn_2k3 {
     BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
    #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
    progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
    StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 
    1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
    BORDER-BOTTOM: #002D96 1px solid
    }
    .test{
        width:200px;
    }

</style>

<button class="btn test">Button样式(btn)</button><br/><br/>
<button class="btn1_mouseout test">Button样式(btn1_mouseout)</button><br/><br/>
<button class="btn1_mouseover test">Button样式(btn1_mouseover)</button><br/><br/>
<button class="btn2 test">Button样式(btn2)</button><br/><br/>
<button class="btn3_mouseout test">Button样式(btn3_mouseout)</button><br/><br/>
<button class="btn3_mouseover test">Button样式(btn3_mouseover)</button><br/><br/>
<button class="btn3_mousedown test">Button样式(btn3_mousedown)</button><br/><br/>
<button class="btn3_mouseup test">Button样式(btn3_mouseup)</button><br/><br/>
<button class="btn_2k3 test">Button样式(btn_2k3)</button><br/><br/>
<button class="btn3_mouseout test" οnmοuseοver="this.className='btn3_mouseover test'" οnmοuseοut="this.className='btn3_mouseout test'" οnmοusedοwn="this.className='btn3_mousedown test'">Button全功能样式</button><br/><br/>

 

<script language="javascript"> function runEx(cod1) { cod=document.getElementById(cod1) var code=cod.value; if (code!=""){ var newwin=window.open('','',''); newwin.opener = null newwin.document.write(code); newwin.document.close(); } } //复制代码 function doCopy(ID) { if (document.all){ textRange = document.getElementById(ID).createTextRange(); textRange.execCommand("Copy"); } else{ alert("此功能只能在IE上有效") } } </script>


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]




feng8008
关注
专栏目录
炫酷Button样式
jeekmary的博客
10-07 2666
按钮 button
几个好看的button样式(转)
keke_Xin的专栏
06-30 1004
&lt;style&gt; button{  background:#F0F0F0 repeat-x;  padding-top:3px;  border-top:1px solid #708090;  border-right:1px solid #708090;  border-bottom:1px solid #708090;  border-left:1px solid ...
v-if 的使用
前端职场小白_炜晨科技的博客
08-13 1230
v-if的使用
漂亮的Button按钮样式
鱼忘七秒的博客
08-02 6万+
开发中各种样式的Button，其实这些样式所有的View都可以共用的，可能对于你改变的只有颜色 所有的都是用代码实现   边框样式，给你的View加上边框 &lt;Button android:layout_width="0dip" android:layout_height="match_parent" android:lay...
CSS八种让人眼前一亮的HOVER效果
qq_40957072的博客
08-19 880
CSS八种让人眼前一亮的HOVER效果 一, 发送效果 <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> #send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh; } button { background: #5f55
button 样式_实现一个基于Vue的Button小组件
weixin_39542340的博客
11-22 298
概述原生HTML的button只能保证功能存在，样式都不怎么好看。当然也可以通过编写css样式来改变原生HTML中的button显示，但是现在各个UI框架都很流行，也很方便，很多时候都是直接引入框架就能获得非常好看、好用的样式组件。那么此篇文章使用Vue也来实现一个好看、使用的Button小组件。实现button.vue首先需要在模板页面将基本button组件需要的元素进行组装 ...
Winfrom 实现Button Lable 组合应用
09-03
在某些情况下，我们可能希望Button不仅有点击功能，还能显示附加信息，此时将Button和Label组合起来就显得很有必要。 要创建自定义控件，我们首先需要继承自System.Windows.Forms.Control类，然后在这个新类中添加...
一组单选按钮radio如何进行控制
10-31
### 一组单选按钮（Radio Button）如何进行控制 在网页设计与开发中，单选按钮（Radio Button）是一种常见的用户界面元素，用于提供多个选项中的单一选择功能。本篇文章将详细探讨如何通过HTML与JavaScript来实现一...
好看的WPF自定义按钮样式（绝对不亏）
09-30
2. **创建样式**：使用`Style`元素为`Button`控件创建一个新的样式。通过设置`TargetType`属性为`Button`来指定样式的目标控件。 3. **设置模板**：在样式中，添加`ControlTemplate`元素来定义按钮的外观。`...
一组好看的单选框样式
08-13
在网页设计和开发中，单选框（Radio Button）是一种常见的用户界面元素，用于让用户在一组互斥选项中做出单一的选择。"一组好看的单选框样式"是指通过CSS（层叠样式表）和可能的JavaScript技术，对默认的单选框进行...
CSS盒模型--边框设置：border: 1px solid red(像素 样式 颜色 )，border-bottom:1px dotted #ccc
热门推荐
12-16 7万+
盒模型--边框（一） 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是border代码的缩写形式，可以分开写： div{ border-width:2px; border-s
漂亮button
weixin_34378045的博客
12-22 73
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;META NAME="Generator" CONTENT="EditPlus"&
鼠标悬浮在button按钮上时的事件
淡蓝海的博客
09-03 1万+
onmouseover="this.style.backgroundColor='#286090';"onmouseout="this.style.backgroundColor='#337AB7';">
一个按钮的效果
pavel0的专栏
06-10 210
style="border:0; width:88px; height:26px;" onmouseover="this.style.marginTop='-1px';" onmousedown="this.style.marginTop='1px';" onmouseout="this.style.marginTop='0';" onmouseup="this.style.marginTop='...
几个好看的button样式
Welcome to Garywang's IT BLOG.
12-10 1082
.btn { 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, StartC
几个比较好看的Button的CSS
清清海水
12-13 3811
需要IE 6支持。.btn {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
K8s 很难么？带你从头到尾捋一遍，不信你学不会
民工哥的博客
02-23 9057
点击关注公众号，回复“1024”获取2TB学习资源！为什么要学习 Kubernetes?虽然 Docker 已经很强大了，但是在实际使用上还是有诸多不便，比如集群管理、资源调度、文件管理等...
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）
北豼不太皮的博客
02-21 3597
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）一、学习目标二、了解单片机STM32F401RET6三、C语言基础 一、学习目标 二、了解单片机STM32F401RET6 4、STM32F401RE特征 三、C语言基础 1.数据类型 常用2的次方： 2^7 = 128 2^8 = 256 2^15 = 32768 2^16= 65536 51单片机常见的数据类型： char: 占内存1字节 取值范围：-128~127 -2^7 ~ 2
Android开发（1） | Fragment 的应用——新闻应用
Jormungand_V的博客
02-21 7106
文章目录 news_item.xml： <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/news_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:lines="1" android:ellipsize="
微信小程序：组合继承实现button样式为图片的方法
在C++程序设计中，"继承与组合-微信小程序button的样式设置为图片的方法"这一章节深入探讨了面向对象编程中的两个关键概念：继承和组合。首先，继承允许我们在一个类（如Professor类）中扩展或复用已有的类（如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值