css实现一个简单的扁平化按钮

css实现一个简单的扁平化按钮

我们先来看下按钮样式:

(推荐教程:CSS教程)

7f31d19342fa0f02d63ca4379d6306a.png

具体代码:

立即学习“前端免费学习笔记(深入)”;

//js写法$("#btn").css({"font-family": "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif","font-size": "13px!important","height": "30px","line-height": "18px!important","padding": "3px 18px","display": "inline-block","vertical-align": "middle","font-weight": "normal","border-radius": "2px","margin": "0 8px 0 3px","border": "1px solid #3383da","color": "#ffffff","background-color": "#3383da"});//css写法#btn{font-family: "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif";font-size: 13px!important;height: 30px;line-height: 18px!important;padding: 3px 18px;display: inline-block;vertical-align: middle;font-weight: normal;border-radius: 3px;margin: 0 8px 0 3px;border: 1px solid #3383da;color: #ffffff;background-color: #3383da;cursor: pointer;}

以上就是css实现一个简单的扁平化按钮的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615728.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:03:58
下一篇 2025年12月24日 05:04:09

相关推荐

  • 谈谈css中的3种预处理器

    本篇文章给大家介绍一下三种css预处理器的,以及比较一下,了解他们之间的差异。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 一、介绍 CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时…

    2025年12月24日
    000
  • 前端常见css的面试题目

    随着疫情的不断好转,各地都开始逐步的复工,当然对我们来说,也马上迎来所谓的金三银四跳槽季。在此,分享自己在前端领域中积累的一些经验,供自己温故知新。   对于前端来说,涉及的知识面广,内容繁多,但是万变不离其宗,主要也就是围绕着html(5),css(less,scss,sass,styus,css…

    2025年12月24日
    000
  • 谈谈CSS实现水平垂直居中布局的方法

    最近面试的时候,面试官问到了CSS水平垂直居中布局的方式,对于刚入前端没多久的我,无疑是一脸懵逼,闲了赶紧查阅资料分析一波,给各位分享一下,避免落坑。 首先先说明一下html和一些基础css样式,下面就不再赘述!html 垂直水平居中 公共css代码如下 /* 公共样式 */.div1{width:…

    2025年12月24日
    000
  • 在html元素中设置css样式的方式是什么

    如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置”id” 和 “class”选择器。 (推荐教程:CSS教程) 下面我们来分别说一下id选择器和class选择器。 id选择器 立即学习“前端免费学习笔记(深入)”; id 选择器可以…

    2025年12月24日
    000
  • css如何设置透明度不会影响子元素

    通过RGBA设置透明度,只有最新的浏览器支持,支持IE9+,可通过RGBA的alpha通道的方式设定。 (推荐教程:CSS教程) 显示文字 前三个值是rgb的颜色值,最后一个透明度的值,取值为0~1,值越小越透明。 兼容所有浏览器写法: 立即学习“前端免费学习笔记(深入)”; background-…

    2025年12月24日
    000
  • css怎样实现DIV高度自适应

    可以添加表格特性。 (推荐教程:CSS教程) 父级元素添加属性  display: table; 子一级元素添加属性 display: table-cell; 立即学习“前端免费学习笔记(深入)”; 代码: .div-row { width: 400px; border: 1px solid #23…

    2025年12月24日 好文分享
    000
  • css中的五种常见页面布局

    公共样式部分代码: (推荐教程:CSS教程) html * { margin: 0; padding: 0; } .layout { margin-bottom: 20px; } .layout article { width: 100%; } .layout article > div { …

    2025年12月24日 好文分享
    000
  • 利用css实现鼠标悬停效果

    我们先来看下效果: (推荐教程:CSS教程) html代码: 立即学习“前端免费学习笔记(深入)”; 这是是pic-1 这是是pic-2 这是是pic-3 css代码: html { box-sizing: border-box; font: 18px PT Mono; background: an…

    2025年12月24日
    000
  • css如何实现按钮居中显示

    先来看下效果: (推荐教程:CSS教程) 通过简单的Css样式就可以实现 立即学习“前端免费学习笔记(深入)”; 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto…

    2025年12月24日
    000
  • CSS如何清除浮动?3种方法介绍

    css如何清除浮动?本篇文章给大家介绍一下使用css清除浮动的3种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 首先这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。 下面我就讲三种常用清除浮动的方法,够用了。 1、在浮动元素后面加一个空的div,并为它清除浮动 立即学…

    2025年12月24日 好文分享
    000
  • 如何利用css实现圆环效果

    css实现圆环效果有多种方法,这里为大家分享五种方法: (推荐教程:CSS教程) 首先我们来看一下实现效果: 立即学习“前端免费学习笔记(深入)”; 接下来为大家介绍方法: 1、两个标签的嵌套 .element1{ width: 200px; height: 200px; background-co…

    2025年12月24日
    000
  • 书写CSS样式有哪三种方式

    书写css样式的三种方式: (推荐教程:CSS教程) 一、行内式 是通过标签的style属性来设置元素的样式,其基本语法格式如下: 立即学习“前端免费学习笔记(深入)”; HelloWord 语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式,其中属性值的书写规…

    2025年12月24日
    000
  • 纯CSS如何实现3D书本效果?(代码示例)

    本篇文章给大家通过代码示例介绍css实现3d书本效果,代码简单易懂。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 话不多说,先来看一下效果图 源代码如下 Document *{ margin: 0; padding: 0; } body{ display: flex; align…

    2025年12月24日
    000
  • 详解CSS中的选择器和优先级

    CSS选择器优先级得关系为: !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 1、内联样式表的权值最高 () 权值为1000 2、统计选择符中的ID属性个数。(#id) 权值为100 立即学习“前端免费学习笔记(深入)”; 3、统计选择符中的C…

    2025年12月24日 好文分享
    000
  • css中有哪些常见的布局方式

    常见的几种布局方式: (推荐教程:css快速入门) 固定布局 流式布局(自适应布局) 弹性布局(伸缩布局) 立即学习“前端免费学习笔记(深入)”; 定位布局 浮动布局 响应式布局(媒体查询) 固定布局的固定说的是盒子的宽高都是固定的。margin,padding等。 流式布局的流式是指的盒子的宽高和…

    2025年12月24日
    000
  • css中的display属性有哪些值?各有什么作用?

    display属性值介绍: (推荐教程:css快速入门) none    此元素不会被显示。     block    此元素将显示为块级元素,此元素前后会带有换行符。     inline    默认。此元素会被显示为内联元素,元素前后没有换行符。     立即学习“前端免费学习笔记(深入)”; …

    2025年12月24日
    000
  • css如何实现圆角内凹效果

    实现思路: (推荐教程:css快速入门) 两个并排的div,在第二个div内定义一个2倍宽高的名为item,对item进行设置border-radius: 50%,再对其进行绝对定位。 代码实现: Title .box { width: 50px; height: 50px; overflow: h…

    2025年12月24日
    000
  • css如何实现蒙版效果

    重要知识点: (推荐教程:css快速入门) background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6; 样式: .back {background:url(images/coupon-logo.gif) no-repeat;} .top {…

    2025年12月24日
    000
  • css中伪类和伪元素有什么区别

    一、定义区别 (推荐教程:css快速入门) 伪类 伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如 :visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:…

    2025年12月24日
    000
  • css清除浮动的原理介绍

    首先我们要知道clear:both是清除浮动的关键。 (推荐教程:css快速入门) clear是CSS中的定位属性,规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。 clear属性只能在块级元素上其作用,这就是清除浮动样式中display:block的…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信