首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在同一个CSS中自定义不同的提交按钮

在同一个CSS中自定义不同的提交按钮,可以通过为不同的提交按钮分配不同的类名,然后在CSS中使用这些类名来定义不同的样式。以下是一个示例:

首先,在HTML中为不同的提交按钮分配不同的类名:

代码语言:txt
复制
<form>
 <input type="submit" class="btn-primary" value="提交1">
 <input type="submit" class="btn-secondary" value="提交2">
</form>

接下来,在CSS中定义不同的样式:

代码语言:txt
复制
.btn-primary {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

这样,在同一个CSS中就可以自定义不同的提交按钮样式了。当然,您可以根据需要自定义更多的样式,例如按钮的大小、边框、阴影等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

提交到不同URL的表单按钮

然后你需要 另一个 提交按钮,跳转到不同的URL。为什么需要这样做不重要,任何事都有原因,毕竟网页包含太多东西。 我找到了一些人们尝试处理这个问题的其它方法。...其中一种方法是放弃提交到不同的URL,但是给每个提交按钮一个相同的name,不同的value,然后当需要处理不同问题时检查value值。...正确的答案HTML已经为你想到了。我猜它或许并没有像它应该的那样众所周知,因此才有了这篇文章。 它是formaction属性,你可以直接放在提交按钮里,它会覆盖表单自己的action。...---- 往期精选文章 ES6中一些超级好用的内置方法 浅谈web自适应 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全 WEB前端性能优化常见方法...一小时内搭建一个全栈Web应用框架 干货:CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 ---- ---- 小手一抖,资料全有。

2K30

Android自定义动画酷炫的提交按钮

下边就先来看看设计需要的效果图及我们最终实现的效果图,毕竟有图有真相嘛! 目录 刚接到任务 动画分析 画个圆角矩形 让矩形变圆 让圆上移 在圆中绘制对勾 总结 1 刚接到任务 ?...2 动画分析 通过这个gif动画我们分析出动画过程的实质: 一个长方形(或者是圆角长方形)逐渐过渡成为两边是半圆的长方形,于此同时长方形两边向中间靠拢最终形成一个圆,然后圆上升一定高度,最后在圆里边画出对勾...有图可知移动的距离是(width-height)/2,然后在写一个动画让其改变距离最终两个半圆靠拢在一起形成圆 ? 完成上边代码后再来看下效果 ?...第三步:让圆上移 这个移动很好实现,直接改变Y轴方法的坐标就行了,这个很简单就直接看代码吧 ? 第四步:在圆中绘制对勾 而且是带动画的对勾,让对勾以动画的形式慢慢绘制出来。...我们先拿到对勾的path路径在对其改变偏移量加上DashPathEffect就能实现动态绘制对勾的效果了,那么怎么计算对勾的起点折点和终点的坐标呐,在网上找了一个不错的图片,如果你的设计师直接把位置给你标明的很详细的话你就省了这些自己计算的麻烦

1.6K30
  • SpringBoot项目在IDEA中同一个项目用不同端口启动

    在 IDEA 中开发或学习 Java 项目时,我们经常需要同一个项目以不同端口多次启动。比如,我们想测试 Nginx 的负载均衡,再比如我们想测试 OpenFeign 的负载均衡。...导致我们会在命令行下使用 java -jar 的方式重新指定端口再启动一个实例。至少我就这么干过。 其实,IDEA 可以通过简单的配置来解决这样的问题,而且也非常的方便。...操作如下,在工具栏上选择edit configurations,如下图 然后, 添加新的配置,并选择 SpringBoot,如下图: 添加后显示为 Unnamed,此时我们可以重命名,这里我们重命名为...TestApplication2,如下图 然后在 Main class 中选择我们的启动类,在 VM options 填写 -Dserver.port=8081,如下图: 这样就可以点击 OK...按钮, 在工具栏的配置处可以看到有两个项目了,如下图 这时,就可以通过 IDEA 以 8081 端口号启动同一个项目了。

    1.7K20

    java中==、equals的不同AND在js中==、===的不同

    一:java中==、equals的不同        1....因为在Integer类中,会将值在-128的缓存在常量池(通过Integer的一个内部静态类IntegerCache进行判断并进行缓存)中,所以这两个对象的引用值是相同的。...但是超过这个区间的话,会直接创建各自的对象(在进行自动装箱的时候,调用valueOf()方法,源代码中是判断其大小,在区间内就缓存下来,不在的话直接new一个对象),即使值相同,也是不同的对象,所以返回...,前者会创建对象,存储在堆中,而后者因为在-128到127的范围内,不会创建新的对象,而是从IntegerCache中获取的。...注意的是只要值相同就会返回true.        3.例如: //创建两个String对象,这两个String对象不是同一个内存地址。

    4K10

    在 Directory Opus 中添加自定义的工具栏按钮提升效率

    Directory Opus 自定义的工具栏按钮可以执行非常复杂的命令,所以充分利用自定义工具栏按钮的功能可以更大程度上提升工作效率。...Directory Opus 的工具栏 这是我的 Directory Opus 的界面(暂时将左侧的树关掉了): 下图是我目前添加的一些工具栏按钮: 自定义工具栏按钮 自定义的方法是,点击顶部的 设置...命令编辑器 要定义一个能够极大提升效率的按钮,命令编辑器中的多数框我们都是要使用的。 接下来我会通过两个示例来说明如何使用这个命令编辑器。...在自定义完按钮之后,不要忘了关闭最开始弹出来的“自定义工具栏”的对话框。...一切皆命令 在阅读上面的博客定义完一些自己的命令之后,你再观察 Directory Opus 的其他工具栏按钮,包括左上角的菜单,你会发现其实 Directory Opus 中所有的功能按钮和菜单都是使用相同的机制建立起来的

    98140

    在多线程构建场景下Powermockito无法在不同类中Mock同一个静态方法

    在修改单元测试的过程中,不幸踩了个坑,发现 Powermockito 的PowerMock.mockStatic(ClassThatContainsStaticMethod.class) 在多线程场景下是无法正常工作的...由于在测试中直接调用 C.getSomeObject() 会导致一些不可预期的错误,所以我想对AB类进行测试就必须使用Mock,于是我那么写: Class ATest{true@Beforetruepublic...C.class)truetruePowerMock.when(C.C.getSomeObject()).thenReturn(PowerMock.mock(SomeObject.class))true}} 当我在IDE...中分别运行 ATest 或者 BTest 是,我的测试都是能正确运行的,但是当你使用Maven或者其他的构建工具进行多线程测试的时候,你就会发现问题来了。...由于我不是Powermockito的专家,所以无法深入的去探究这个问题的原因,但是我想,这应该是和静态方法本身在一个JVM内的唯一性有关,我截取了网上两个解释供参考: Explanation 1 Without

    6K30

    友盟分享中添加自定义的分享按钮

    之前项目的分享用到的是友盟第三方分享,但分享中只有分享到几个平台的功能,如:分享到微信、QQ、新浪微博,并没有复制分享链接这样的自定义的功能。...我又看了友盟开发文档,说实话本人并没有找到我想要的,后来还是通过百度,看其他人的博客才知道如何添加自定义分享按钮(当然这肯定也在友盟的文档中,但文档内容太多,我没找到,也懒得找,不如在百度中有针对性地找...下面是一些核心代码: // 一下的方法是在分享列表中添加一个自定义的按钮 UMSocialSnsPlatform *snsPlatform = [[UMSocialSnsPlatform alloc...] initWithPlatformName:@"CustomPlatform"]; // 设置自定义分享按钮的名称     snsPlatform.displayName = @"复制链接"...UMShareToSina,UMShareToSms,UMShareToWechatSession, UMShareToWechatTimeline,@"CustomPlatform"]]; // 注意:在监听自定义按钮的点击事件中执行自定义按钮的点击操作

    1.7K40

    在 Flutter 中创建可拖动的浮动操作按钮

    一个浮动的动作按钮通常可以在点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 的参数作为参数。...通常,所需的行为是onPressed仅在点击按钮时调用回调,而不是在拖动结束时调用。然而,当拖动结束时,指针向上事件也会被触发。作为解决方案,我们需要跟踪按钮是否被拖动。...所以,我们可以检查内部onPointerUpcallback 仅onPressed在值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮的类。...然后,您可以从 RenderBox 的 size 属性中获取父级的大小。您必须小心,因为必须在构建树之后调用 findRenderObject 方法。...key: _key, child: widget.child, ), ), ); } } 输出: 概括 这就是如何在 Flutter 中创建可拖动的浮动操作按钮

    5.7K10

    为啥同样的逻辑在不同前端框架中效果不同

    前端框架中经常有「将多个自变量变化触发的更新合并为一次执行」的批处理场景,框架的类型不同,批处理的时机也不同。 比如如下Svelte代码,点击H1后执行onClick回调函数,触发三次更新。...主线程在工作过程中,新任务如何参与调度? 第一个问题的答案是:「消息队列」 所有参与调度的任务会加入任务队列中。根据队列「先进先出」的特性,最早入队的任务会被最先处理。...为了解决时效性问题,任务队列中的任务被称为宏任务,在宏任务执行过程中可以产生微任务,保存在该任务执行上下文中的微任务队列中。...当同一个宏任务中发生多次DOM变化,会产生多个MutationObserver微任务,其执行时机是该宏任务执行结束前,相比于作为新的宏任务进入队列等待执行,保证了时效性。...利用了宏任务、微任务异步执行的特性,将更新打包后执行。 只不过不同框架由于更新粒度不同,比如Vue3、Svelte更新粒度很细,所以使用微任务实现批处理。

    1.5K30

    在Gitlab中规范提交的commit message的格式

    我们有时候会遇到开发提交的千奇百怪的commit信息,这样给代码更新追踪溯源增加了麻烦,并且我们使用的gitlab ci 会使用commit信息判断构建步骤,所以有必要为GitLab 增加自定义 Commit...提交格式检测 介绍 Git 支持在不同操作上执行的钩子。...这些钩子在服务器上运行,可用于根据存储库的状态强制执行特定的提交策略或执行其他任务。...opt/gitlab/git-data/repositories/gitaly相对路径** 下,在该目录下创建一个名为custom_hooks的目录 在新custom_hooks目录中,创建一个名称与钩子类型匹配的文件...要为全局服务器挂钩使用不同的目录,请custom_hooks_dir在 Gitaly 配置中设置: 对于 Omnibus 安装,这在gitlab.rb.

    3.4K31

    【实战技巧】CSS自定义属性以及在VUE3中的使用

    ---- 什么是css自定义属性 官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性. CSS变量和预处理器中的变量有什么不同?...CSS变量是浏览器中直接可用的CSS属性,而预处理中的变量是用于编译成常规的CSS代码,浏览器其实对它们一无所知。...我们可以在 样式表中 ,在 内联样式 中,在 SVG的标签 中直接使用CSS变量,甚至可以在 运行时 用JavaScript直接修改它。但是我们是 无法 对预处理器中的变量做上面这些操作的....如果想要将--theme-color设置为全局变量,处处可用,我们使用:root伪元素 :root { --theme-color: gray; } 同一个CSS变量,可以在多个选择器内声明。...VUE3.0中,可以在CSS中使用 响应式变量, 通过下图可以看出,它的原理就是运用了CSS自定义属性 我们先在HelloWorld.vue中写入下方代码,我们使用定时器两秒以后修改color的值,

    2.7K20

    网页|在CSS学习中的问题总结

    为了使页面看起来更美观,我开始着手对CSS的学习,在刚开始的学习过程中也确实遇到了许多问题,现在我把他们集中总结。...解决方案 首先明确我的学习顺序:CSS盒子模型→CSSborder→CSSoutline→CSS margin→CSS padding. boxmodle中遇到的问题: 问题一:(待解决)盒中内容过长会超出盒子...问题二:(已解决)对于同一个border,可以有最少一种,最多四种边框样式,那么当我们选用三种样式时,就会有两边是一样的样式,是哪两边呢?...问题三:(未解决)设置边框样式就要有“p.{}”格式,这里的p与段落标签显然不同,但又不知道他的含义是什么?...图3.1.1outline 在所有边框的代码中,仅此一处规定了outline,但所有边框都增加了一样的轮廓。(参考图2.2.8)猜想:是否可以给每一个边框都定义不同的轮廓?

    2.3K20

    Flutter&鸿蒙next中的按钮封装:自定义样式与交互

    因此,封装一个自定义按钮组件,可以让我们更灵活地控制按钮的颜色、形状和点击事件等属性,从而更好地融入应用的整体设计中。...复用性:在不同的项目和页面中复用相同的按钮组件,减少代码重复。Flutter中的按钮基础在Flutter中,按钮通常通过继承Button类或使用GestureDetector组件来实现。...在CustomButton中,我们可以通过color参数来设置按钮的背景色,通过textColor参数来设置文本颜色。这允许我们根据不同的场景和主题来调整按钮的颜色。...这样,我们就可以在回调函数中实现按钮的业务逻辑。使用自定义按钮现在我们可以在应用的任何地方使用CustomButton组件了。...总结通过封装自定义按钮组件,我们可以更灵活地控制按钮的样式和行为,从而提升应用的用户体验。在Flutter中,这涉及到自定义组件的创建、样式的设置、事件的处理以及测试。

    7500

    如何在不同的Python模块中自定义日志记录

    在不同的 Python 模块中自定义日志记录是一种常见的需求,尤其是在构建复杂的应用程序时。可以通过以下步骤实现模块间一致性、灵活性和独立的日志记录。...1、问题背景在一个应用程序中,有多个模块配置了日志记录。 所有这些模块都将日志发送到同一个文件。...do something** logger.info("some text")存在多个actions1/2/3.py模块,并且希望为这些操作脚本中的每个脚本设置不同的日志级别和不同的日志格式。...目标是希望在调用init()方法时初始化这些自定义设置。2、解决方案可以使用logging.getLogger(name)方法从日志记录模块获取日志记录器对象,而不是创建一个单独的全局日志记录器。...,并为每个日志记录器对象设置不同的日志级别和日志格式。

    11810

    百篇(5):FeignClient 在不同场景中的应用

    Defaults to true. */ boolean primary() default true; } 在源码中可以看到比较有用的四个注解 name , url, fallback...,因为在 feignclient 中使用 占位符,所以你需要在配置文件中添加 user-server-api.url= 否则会报出如下异常信息 org.springframework.beans.factory.BeanDefinitionStoreException...boot项目值的是不需要注册到微服务中,单独的项目 首先引入依赖 org.springframework.boot <artifactId...其中后面的地址为网关访问地址 user-server-api.url=192.168.0.101:8089/api/user-server/ 在启动类中添加注解 @EnableFeignClients...FeignClient 注解上设置 url,例如例子程序 在项目配置 properties 文件,这里我使用 server.properties 下面是我测试的时候自己起的 网关地址 server.properties

    11.1K50

    在Android应用中实现跳转的计数和模式切换按钮

    问题描述 在程序应用中,我尝试引入了两个新功能:连续点击跳转UI和切换按钮名称模块显示。...用户在使用过程中遇到了以下问题: 连续点击跳转UI问题:首次连续点击八次能成功跳转UI,但在第二次尝试时无法跳转。 按钮创建问题:应用在每次操作时创建两个按钮,这种方法在视觉上和性能上都不够高效率。...取模运算确保了计数器在达到设定次数后自动归零,还可以无限次重复点击八次的操作。 实现效果:用户现在可以无限次地通过连续点击八次来触发UI跳转。...第二个问题的解决方案:控制按钮可见性 为了解决按钮创建问题,在同一个活动中控制两个按钮的可见性,而不是重复创建按钮: 用户可以通过点击“切换升级模式”按钮进入"升级模式"。...用户再次点击“退出升级模式”按钮返回到"蓝牙模式"。 通过这种方式,提升了用户界面的体验。 结论 通过上述解决方案,解决了用户在操作上的不便,提升了应用的整体性能,还可以优化UI的便捷性。

    26440
    领券