精华内容
下载资源
问答
  • 按钮样式
    千次阅读
    2020-07-19 16:00:14

    css设置按钮样式

    by Ashwini Sheshagiri

    通过Ashwini Sheshagiri

    Buttons have become an inevitable part of front end development. Thus, it is important to keep in mind a few things before you start styling buttons. I have gathered some of the ways of styling buttons using CSS. You can combine most of the methods in order to create a new style, too. To create CSS for gradients, you may use https://uigradients.com.

    按钮已成为前端开发的必然部分。 因此,在开始设计按钮样式之前,请记住一些注意事项。 我已经收集了一些使用CSS设置按钮样式的方法。 您也可以组合大多数方法来创建新样式。 要为渐变创建CSS,可以使用https://uigradients.com

    一个简单的“入门”按钮 (A simple “Get Started” button)

    .btn {
    background: #eb94d0;

    / *创建渐变* / (/* to create the gradients */)

    background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);  background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);  background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);  background-image: -o-linear-gradient(top, #eb94d0, #2079b0);  background-image: linear-gradient(to bottom, #eb94d0, #2079b0);

    / *给出btn的弯曲边缘* / (/* to give the curved edge for the btn */)

    -webkit-border-radius: 28;  -moz-border-radius: 28;  border-radius: 28px;
    text-shadow: 3px 2px 1px #9daef5;  -webkit-box-shadow: 6px 5px 24px #666666;  -moz-box-shadow: 6px 5px 24px #666666;  box-shadow: 6px 5px 24px #666666;
    font-family: Arial;  color: #fafafa;  font-size: 27px;  padding: 19px;  text-decoration: none;}

    / *悬停按钮* / (/*button on hover*/)

    .btn:hover {
    background: #2079b0;
    background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);  background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);  background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);  background-image: -o-linear-gradient(top, #2079b0, #eb94d0);  background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
    text-decoration: none;}

    透明背景按钮 (Transparent background button)

    .btn {

    / *文字颜色* / (/* Text color */)

    color: #0099CC;

    / *删除背景色* / (/* Remove background color */)

    background: transparent;

    / *边框粗细,线条样式和颜色* / (/* Border thickness, line style, and color */)

    border: 2px solid #0099CC;

    / *将曲线添加到边界角* / (/* Adds curve to border corners */)

    border-radius: 6px;

    / *使字母大写* / (/* Make letters uppercase */)

    border: none;      color: white;      padding: 16px 32px;      text-align: center;      display: inline-block;      font-size: 16px;      margin: 4px 2px;      -webkit-transition-duration: 0.4s; /* Safari */      transition-duration: 0.4s;      cursor: pointer;      text-decoration: none;      text-transform: uppercase;}.btn1 {      background-color: white;       color: black;       border: 2px solid #008CBA;}

    / *悬停按钮* / (/*button on hover*/)

    .btn1:hover {      background-color: #008CBA;      color: white; }

    具有CSS实体的按钮 (Button with CSS Entities)

    You can find the complete list of CSS entities here: https://www.w3schools.com/cssref/css_entities.asp

    您可以在此处找到CSS实体的完整列表: https : //www.w3schools.com/cssref/css_entities.asp

    You can also use HTML entities, but they’re limited. https://www.w3schools.com/html/html_entities.asp

    您也可以使用HTML实体,但是它们是有限的。 https://www.w3schools.com/html/html_entities.asp

    .button {  display: inline-block;  border-radius: 4px;  background-color: #f4511e;  border: none;  color: #FFFFFF;  text-align: center;  font-size: 28px;  padding: 20px;  width: 200px;  transition: all 0.5s;  cursor: pointer;  margin: 5px;}
    .button span {  cursor: pointer;  display: inline-block;  position: relative;  transition: 0.5s;}
    .button span:after {
    content: '\00bb';  /* CSS Entities. To use HTML Entities, use →*/
    position: absolute;  opacity: 0;  top: 0;  right: -20px;  transition: 0.5s;}
    .button:hover span {  padding-right: 25px;}
    .button:hover span:after {  opacity: 1;  right: 0;}

    带有点击动画的按钮 (Button with click animation)

    CSS: (SCSS)

    CSS:(SCSS)

    $gray: #bbbbbb;
    * {  font-family: 'Roboto', sans-serif;}
    .container {  position: absolute;  top:50%;  left:50%;  margin-left: -65px;  margin-top: -20px;  width: 130px;  height: 40px;  text-align: center;}
    .btn {      color: #0099CC; /* Text color */      background: transparent; /* Remove background color */      border: 2px solid #0099CC; /* Border thickness, line style, and color */      border-radius: 70px; /* Adds curve to border corners */      text-decoration: none;      text-transform: uppercase; /* Make letters uppercase */      border: none;      color: white;      padding: 16px 32px;      text-align: center;      text-decoration: none;      display: inline-block;      font-size: 16px;      margin: 4px 2px;      -webkit-transition-duration: 0.4s; /* Safari */      transition-duration: 0.4s;      cursor: pointer;}.btn1 {      background-color: white;       color: black;       border: 2px solid #008CBA;} .btn1:hover {      background-color: #008CBA;      color: white; }
    b {  outline:none;  height: 40px;  text-align: center;  width: 130px;  border-radius:100px;  background: #fff;  border: 2px solid #008CBA;  color: #008CBA;  letter-spacing:1px;  text-shadow:0;  font:{    size:12px;    weight:bold;  }  cursor: pointer;  transition: all 0.25s ease;
    &:active {    letter-spacing: 2px ;  }  &:after {    content:"";  }}.onclic {  width: 10px !important;  height: 70px !important;  border-radius: 50% !important;  border-color:$gray;  border-width:4px;  font-size:0;  border-left-color: #008CBA;  animation: rotating 2s 0.25s linear infinite;  &:hover {    color: dodgerblue;    background: white;  }}.validate {  content:"";  font-size:16px;  color: black;  background: dodgerblue;  border-radius: 50px;  &:after {    font-family:'FontAwesome';    content:" done \f00c";  }}
    @keyframes rotating {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }}

    Javascript: (JQuery)

    Javascript:(jQuery)

    $(function() {  $("#button").click(function() {    $("#button").addClass("onclic", 250, validate);  });
    function validate() {    setTimeout(function() {      $("#button").removeClass("onclic");      $("#button").addClass("validate", 450, callback);    }, 2250);  }  function callback() {    setTimeout(function() {      $("#button").removeClass("validate");    }, 1250);  }});

    带有图像的按钮 (Button with an image)

    .btn {
    background: #92c7eb; background-image: url(“http://res.freestockphotos.biz/pictures/15/15107-illustration-of-a-red-close-button-pv.png"); background-size: cover; background-position: center; display: inline-block; border: none; padding: 20px; width: 70px; border-radius: 900px; height: 70px; transition: all 0.5s; cursor: pointer;}.btn:hover{ width: 75px; height: 75px;}

    带有图标的按钮 (Button with icons)

    index.html:

    index.html:

    <div class="main"><button class="button" style="vertical-align:middle"><a href="#" class="icon-button twitter"><i class="icon-twitter"></i><span></span></button></a>  <div class="text"><strong>TWEET!</strong></div></div>

    style.css:

    style.css:

    button{  border: none;  border-radius: 50px;}html,body {  font-size: 20px;  min-height: 100%;  overflow: hidden;  font-family: "Helvetica Neue", Helvetica, sans-serif;    text-align: center;}.text {  padding-top: 50px;  font-family: "Helvetica Neue", Helvetica, 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }.text:hover{  cursor: pointer;  color: #1565C0;}.main {  padding: 0px 0px 0px 0px;  margin: 0;  background-image: url("https://someimg");  text-align: center;  background-size: 100% !important;  background-repeat: no-repeat;  width: 900px;  height: 700px;  }
    .icon-button {  background-color: white;  border-radius: 3.6rem;  cursor: pointer;  display: inline-block;  font-size: 2rem;  height: 3.6rem;  line-height: 3.6rem;  margin: 0 5px;  position: relative;  text-align: center;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  width: 3.6rem;}
    .icon-button span {  border-radius: 0;  display: block;  height: 0;  left: 50%;  margin: 0;  position: absolute;  top: 50%;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  width: 0;}.icon-button:hover span {  width: 3.6rem;  height: 3.6rem;  border-radius: 3.6rem;  margin: -1.8rem;}.twitter span {  background-color: #4099ff;}
    /* Icons */.icon-button i {  background: none;  color: white;  height: 3.6rem;  left: 0;  line-height: 3.6rem;  position: absolute;  top: 0;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  width: 3.6rem;  z-index: 10;}.icon-button .icon-twitter {  color: #4099ff;}
    .icon-button:hover .icon-twitter {  color: white;}

    结论 (Conclusion)

    In this tutorial, you’ve learned how to customize buttons using CSS and a bit of Javascript if you need the “after click” function. You can also use CSS3ButtonGenerator to generate simple buttons. Feel free to ping me if you have any questions.

    在本教程中,您学习了如何在需要“单击后”功能的情况下使用CSS和一些Javascript定制按钮。 您还可以使用CSS3ButtonGenerator生成简单的按钮。 如有任何疑问,请随时与我联系。

    If you liked this article and if it helped you, do give some claps! ?

    如果您喜欢这篇文章,并且对您有所帮助,请鼓掌! ?

    翻译自: https://www.freecodecamp.org/news/a-quick-guide-to-styling-buttons-using-css-f64d4f96337f/

    css设置按钮样式

    更多相关内容
  • c# winform编程 玻璃按钮样式 非常漂亮的按钮样式库,直接打开可以使用,支持VB,大家下载吧。
  • 漂亮的C#WPF自定义按钮样式
  • 3款外观风格清新漂亮的CSS3开关按钮样式,基于CSS3的自定义Checkbox开关美化效果,有3D效果和扁平化风格。
  • 50个从简单到复杂绚丽的的按钮的CSS样式,只需引用一个css文件,轻松解决单调的按钮样式问题
  • 这次我们要来分享一款基于HTML5和CSS3的社会化分享按钮,这款分享按钮外观样式非常漂亮,按钮的色彩也比较华丽自然,这款基于HTML5的分享按钮提供两种样式,一种是图标式按钮,另一种则是图标结合文字的按钮样式。...
  • 项目中包含了WPF窗体样式、按钮样式、复选框样式等;需要的朋友可以下载。
  • 这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮。
  • CssButton按钮样式

    2016-09-21 15:49:36
    css按钮样式
  • 按钮一般都是通过button标签实现的吧,本文会介绍下使用a和span组合定义按钮样式,自写样式,感兴趣的朋友们可以参考下哈,希望可以帮助到你们
  • 全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
  • type=file修改按钮样式
  • css自定义文件上传按钮样式
  • 这是一款简单的Bootstrap4按钮样式扩展库。该Bootstrap4按钮样式扩展库通过定义CSS,来为bootstrap 4原生按钮添加3D按钮,带图标的按钮,圆角按钮,以及为按钮添加更多的可用颜色,非常实用。
  • 5款纯css3按钮样式

    2019-12-13 07:45:27
    这是一款使用css伪元素制作的纯css3按钮样式。该款按钮样式共有5种效果,后面4种有3d立体效果。该css3按钮样式是网页设计不可多得的素材。
  • 首先通过微软DESGIN 画图 然后再APP里面定义按钮的样式 最后实现普通的按钮样式转变 一个按钮 一个样式 一共3种样式
  • qt按钮样式

    千次阅读 2022-03-01 15:42:50
    qt种按钮样式设置,显示效果如上图所示。 qss代码: /**正常情况下样式**/ QPushButton{ font: 10pt "微软雅黑"; color: #2f3640; background-color: #f5f6fa; border-color: #2f3640; border-radius: 15px; ...

    在这里插入图片描述
    1、qt种按钮样式设置,显示效果如上图所示。
    该方法优势就是不需要插入的方式,全部由qss实现。

    2、qss代码:

    /**正常情况下样式**/
    QPushButton{
    	font: 10pt "微软雅黑";
        color: #2f3640;
        background-color: #f5f6fa;
        border-color: #2f3640;
        border-radius: 15px;
        border-style: solid;
        border-width: 2px;
        padding: 5px;
    }
    
    /**鼠标停留在按钮上的样式**/
    QPushButton::hover{	
        color: #FFFFFF;
        background-color: #718093;
        border-color: #2f3640;
    }
    
    /**鼠标按压下去的样式**/
    QPushButton::pressed,QPushButton::checked{
        color: #FFFFFF;
        background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #273c75, stop:1 #487eb0);
    }
    
    /**按钮失能情况下样式**/
    QPushButton::disabled{
        color: #FFFFFF;
        background-color: #dcdde1;
        border-color: #dcdde1;
    }
    

    3、以上代码使用,有个地方需要注意,那就是圆角设置不能大于高度的一半值,否则圆角将无效。
    比如:

    按钮的高度为:30
    按钮边框圆角:border-radius: 18px;
    

    这种情况下圆角将无效!

    4、如果需要软件种所有按钮全部使用这种样式,可以参考如下文章:
    https://blog.csdn.net/weixin_42887343/article/details/123205555

    展开全文
  • button按钮样式美化

    2015-01-19 14:56:34
    css样式对页面上的button控件进行美化,美化界面效果。
  • 36种漂亮的网页Button按钮样式
  • Android按钮样式

    千次阅读 2022-03-05 09:15:51
    <style name="button1"> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#FFFFFF</item> <item name="android:textSize...item nam...
    //创建一个新的XML文件,可命名为styles
        <style name="button1">
            <item name="android:layout_height">wrap_content</item>
            <item name="android:textColor">#FFFFFF</item>
            <item name="android:textSize">22dp</item>
            <item name="android:background">#434141</item>
            <item name="android:gravity">center</item>
        </style>
    //创建一个button背景图,在drawable目录下创建
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <corners android:radius="50dp" />
        <!--不知道什么效果-->
        <solid android:color="#434141" />
    </shape>
    
        
    

    在这里插入图片描述

    展开全文
  • 漂亮的WPF按钮样式,水晶效果

    热门讨论 2013-08-16 16:44:48
    是用样式实现更改WPF默认按钮外观,效果很棒。
  • 纯css3勾选美化单选按钮样式 纯css3勾选美化单选按钮样式
  • css提交按钮样式

    千次阅读 2021-06-12 02:48:14
    如何给提交按钮做css样式 如何用CSS修改提交按钮样式如何在CSS中设置submit按钮值样式的变化。设置一个长度与宽度,使用到的CSS代码。经过给它设置长度与宽度后,变成了下图所示,相比与没有任何样式,它会好出很多...

    如何给提交按钮做css样式

    如何用CSS修改提交按钮样式

    072bf5daf5e066153cc108ec66d95710.png

    如何在CSS中设置submit按钮值样式的变化。

    设置一个长度与宽度,使用到的CSS代码。

    经过给它设置长度与宽度后,变成了下图所示,相比与没有任何样式,它会好出很多。

    接下来,可以去掉它自带默认的边框,将它边框设置为0PX,观察一下效果。

    如何用CSS代码设定按钮的圆角样式?

    用CSS代码设定按钮的圆角样式,这个在css3中才能实现,通过使用border-radius来实现这个效果,不过有浏览器的兼容性问题,-moz(例如 -moz-border-radius)用于Firefox;-webkit(例如:-webkit-border-radius)用于Safari和Chrome;border-radius:5

    一般有三种方法: Button标签直接使用CSS定义样式,优点是立体感、有按下状态,缺点是样式单一、各浏览器下显示效果不一致。 a标签+背景图片+滑动门技术,优点是可实现多种视觉效果,缺点是采用滑动门技术会导致背景图片过大。

    怎么给按钮添加CSS样式?

    我想做一个按钮.但上面的样式是我做的图片.该怎么做呢?

    给按钮添加css样式的方法: 添加方法:

    .btn {BORDER-RIGHT: #7b9ebd 1px solid; 右边线

    PADDING-RIGHT: 2px; 内边距 右

    BORDER-TOP: #7b9ebd 1px solid; 上边线

    PADDING-LEFT: 2px; 内边距 左

    FONT-SIZE: 12px; 文字大小

    CSS上传按钮样式,把上传按钮做成这样,要怎么写样式

    首先用PHOTOSHOP做出你想要的样式的图片。具体代码,我就把我以前写的CSS样式表发给你看看,仅供参考。 .btn1 { height: 20px; width: 60px; background-image: url(img/search.jpg); background-repeat: no-repeat; background-position: cente

    html +CSS 里面,点击按钮后的样式怎么设置?

    #b1 {background: url(../images/3button.png) no-repeat -33px -5px; wa:active 是鼠标点击时; a:visited是访问过后的情况; 样式还是在这里写,只不过点击得用js添加这个样式到按钮上,css没有对点击提供类似hover的支持; 这种问题可以称作“超链接的响应颜色变化”。实现的方法可以有很多种。

    html 提交按钮感觉太小了,怎么让它变大一点,如果html 提交按钮感觉太小了,怎么让它变大一点,如果要用css的话,麻烦清 这是行内样式 再接在按钮里面添加 style="width:200px; height:200px; 这是宽和高

    展开全文
  • 微信小程序--自定义按钮样式(1)

    千次阅读 2021-03-27 23:43:37
    } 思路 详细思路讲解参考:「HTML+CSS」–自定义按钮样式【001】 说明:微信小程序button参数不太好设置,这里用的view代替(其实也是可以用button的) 踩坑 在微信小程序中没有hover,取而代之的是:hover-class,...
  • 主要介绍了更改上传按钮样式示例,稍复杂的样式需要HTML和JavaScript与CSS来共通处理,需要的朋友可以参考下
  • 50超炫的按钮样式

    2015-11-03 16:02:43
    共收集了50个超炫的按钮样式.这些按钮使用了CSS与图片共同设置而成.
  • wpf更改按钮样式

    2018-11-19 15:31:57
    引用外部资源,动态更改按钮样式....
  • RadioButton 改按钮样式,RadioButton 改按钮样式,RadioButton 改按钮样式
  • 各种按钮样式

    千次阅读 2019-03-17 19:16:04
    用css写了几个按钮样式:静态的,不可编辑的,立体的,圆角的,胶囊状的,动态效果的样式。 效果预览(录屏保存后有点抖动,稍微有点影响最后两个效果): 要写按钮样式首先要去除按钮默认样式: 1、更改背景 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 371,706
精华内容 148,682
关键字:

按钮样式

友情链接: 9S08DZ60_LED.zip