首页
学习
活动
专区
工具
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.6K20

    java==、equals不同ANDjs==、===不同

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

    4K10

    多线程构建场景下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

    5.8K30

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

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

    81940

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

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

    1.7K40

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

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

    1.5K30

    Flutter 创建可拖动浮动操作按钮

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

    5.7K10

    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.1K31

    【实战技巧】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

    百篇(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

    11K50

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

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

    2700

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

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

    25140
    领券