箭头按钮css

基础概念

箭头按钮是一种常见的用户界面元素，通常用于指示方向或表示某种操作。在CSS中，可以通过各种技巧来创建箭头形状的按钮，例如使用伪元素（:before 或 :after）和边框属性。

类型

纯CSS箭头按钮：使用CSS伪元素和边框属性创建箭头形状。
SVG箭头按钮：使用SVG图形作为按钮的背景或图标。
图片箭头按钮：使用图片作为箭头按钮的图标。

应用场景

导航菜单：在网站的导航菜单中使用箭头按钮指示子菜单的方向。
表单提交：在表单提交按钮中使用箭头按钮表示提交操作。
分页控件：在分页控件中使用箭头按钮指示上一页和下一页的方向。

示例代码

以下是一个使用纯CSS创建箭头按钮的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arrow Button Example</title>
    <style>
        .arrow-button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .arrow-button::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 10px;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #fff;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <a href="#" class="arrow-button">Next</a>
</body>
</html>

参考链接

CSS-Tricks: How to Create an Arrow Button with CSS

常见问题及解决方法

箭头方向不正确：检查伪元素的边框属性，确保它们正确地形成了箭头的形状。
箭头位置不准确：调整伪元素的position和transform属性，确保箭头位于按钮的正确位置。
兼容性问题：确保使用的CSS属性在目标浏览器中得到支持，必要时使用前缀或替代方案。

通过以上方法，你可以创建一个具有箭头形状的按钮，并在不同的应用场景中使用它来增强用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

如何使粘性页眉和页脚有箭头按钮显示/隐藏conent作为Google与CSS/Boostrap和Jquery

、

请帮助我使粘性页眉和页脚有箭头按钮显示/隐藏内容作为Google广告的CSS/引导和Jquery

浏览 2提问于2021-07-29得票数 0

3回答

箭头样式css按钮

、

我试着做一个大箭头后退按钮，但箭头似乎偏离了中心。有没有人能告诉我如何清理它，让它看起来正确？

浏览 2提问于2014-07-03得票数 1

回答已采纳

2回答

编辑HTML选择按钮的CSS样式

、、、

可能重复：我想知道CSS是否可以更改HTML select字段的样式。我想让按钮内箭头透明，但保持箭头在那里，所以基本上删除按钮的外观箭头。

浏览 1提问于2012-11-12得票数 3

回答已采纳

1回答

我想将一个手风琴控件嵌套在另一个手风琴控件中，尽管这可以像预期的那样工作，但我想定制它，以便嵌套手风琴的箭头相对于顶层缩进。然而，如果我在场景视图中打开正在运行的应用程序，它似乎会以不同的方式显示出来，我可以看到TitledPane是由TitleRegion>StackPane arrowRegion>StackPane箭头组成的或者我可以让css做场景视图可以做的事情(我也找不到场景视图的导出)。我刚刚在scenebuilder中修改了Netbeans模板JavaFX fxml项目。使用JAVA 1.8.0.92.

浏览 2提问于2016-04-27得票数 2

回答已采纳

0回答

移除重叠的png按钮图像的按钮残留物

、、

我有两个箭头，这两个箭头是按钮和png图像，它们重叠在滚动条上。箭头除了这两个小方块之外，在我设计箭头样式时，它们似乎不会移动/消失。它们看起来像是箭头遗留下来的空按钮。我需要小方块消失，并尝试了边框:无和背景颜色:透明，但这些和其他css命令似乎只适用于箭头，而不是底部的小方框。帮助!按钮html和css： <button onclick="scrollMe(&#

浏览 8提问于2018-07-19得票数 0

1回答

带箭头的Javascript滑块

、、、

我想做一个带箭头的滑块我尝试了几种方法，但还是失败了，所以我真的不知道从哪里开始，这是我的html，<div class="

浏览 46提问于2018-10-09得票数 1

回答已采纳

2回答

在悬停时更改字体图标内按钮内的颜色

、、

在我的站点页脚(正在开发中) 中，在文本之前有3个带有箭头的按钮。箭头是图标字体，我希望它在按钮悬停时改变颜色(就像按钮文本一样)。<a class="footerbutton"><span class="footerlist">X</span>Vraag offerte</a>a:hover.foot

浏览 3提问于2013-03-25得票数 5

回答已采纳

3回答

如何创建一个下拉菜单，如谷歌的“更多”按钮？

在google主页上，如果单击“更多”按钮，就会在该按钮下面打开一个菜单，如下所示：如何使用css/javascript/jquery对网站导航栏中的一个选项卡进行类似的操作？编辑:更具体地说，我想知道如何完成CSS部分，即：

浏览 12提问于2012-06-16得票数 1

回答已采纳

2回答

带有箭头的css按钮..。如何移动箭头

、

我试着做一个基本的按钮盒，上面有一个箭头. <a href="" class="button test">Read More</a>.button { color: white

浏览 7提问于2013-12-18得票数 1

回答已采纳

1回答

带箭头按钮的asp.net折叠样式表

、、、、

我无法谷歌/冰的asp.net ajax手风琴菜单CSS垂直，这在每个窗格上都有箭头按钮。展开时显示不同的箭头，折叠时应显示不同的箭头。

浏览 4提问于2011-04-11得票数 1

回答已采纳

1回答

基于Angular.js中媒体屏幕大小的按钮？

最初，在1207的媒体屏幕上，我将在两个箭头(左箭头和右箭头)之间显示20个按钮中的6个(n)按钮。最初，左箭头将不活动。当用户单击右箭头时，左箭头将处于活动状态，并将导航到next按钮(n+1) (在到达末尾后，右箭头将变得不活动)。当媒体屏幕尺寸缩小时，我需要在两个箭头之间显示有限的按钮。我已经将按钮的数量硬编码为6 => $scope._lastRo

浏览 2提问于2016-12-16得票数 0

1回答

在引导程序中，为什么不能将游标自定义为html元素？

、、

我这里有支JS小提琴： #btnL:hover {} cursor: initial;但在这里，我得到一个文本光标，而不是箭头。当我悬停在我的桌子上时，如何得到箭头？

浏览 0提问于2019-04-28得票数 0

回答已采纳

9回答

光滑的旋转木马-隐藏控制器？

、、

是否有任何选项可以停止slick添加next和以前的按钮？我似乎无法通过css隐藏他们。

浏览 9提问于2015-04-09得票数 33

回答已采纳

2回答

使用纯css在箭头周围画圆圈

、

我有一个按钮，它是使用纯CSS创建的。我不知道这是否可能。我做了一些谷歌调查，但没有找到合适的东西。

浏览 5提问于2013-10-24得票数 1

回答已采纳

1回答

如何相对于父输入按钮正确地对边框宽度形状进行居中？

我有一个通讯订阅箱，看起来如下：该窗体接受父窗体的整个宽度，因此按钮将填充所有可用宽度。相对于按钮，箭头的水平居中不正确。如何解决这个对齐问题？

浏览 3提问于2013-07-14得票数 0

回答已采纳

1回答

光滑的旋转木马把箭藏起来

、、、

正确的箭头显示得很好。您可以在以下网站看到问题：我检查了这个问题：，但似乎不是同一个问题。

浏览 4提问于2015-09-06得票数 3

回答已采纳

1回答

脚本相互重叠/相互抵消？

、、、

我正在编写本应非常简单的HTML、CSS和Jquery代码，但由于我对这些东西还不太熟悉，所以仍然很难弄清楚。请帮帮我..我正在尝试让这个页面上的幻灯片与上的幻灯片完全相同不过，它有两个问题。在我的vbwtest站点上，切换图像的按钮不会出现，然后就是明显的脚本无法工作的问题。它曾经是，但后来我改变了一些东西/添加了一些jquery，它就完全崩溃了。

浏览 3提问于2011-06-01得票数 0

回答已采纳

5回答

元素中的文本来自哪里？

、

我在网上摆弄着一些按钮，当鼠标悬停在上面时，一个显示箭头的按钮出现了。 <a href="#" id="makeGroupButton"> </a> 当用户将鼠标悬停在它上面时我制作了一个JsFiddle来显示

浏览 9提问于2016-08-20得票数 3

1回答

如何使用键盘控制div类块

我正在处理div类的块，使用键盘上下箭头按钮来控制它们。我有一个街区的列表，其中7个是显示，而其他街区是隐藏的。我有从第1块到第17块的块文本。当我按下从第1块到第17块的向下箭头按钮时，这些块将使用“RowhL.8”向上移动，这看起来很好，但是有一个问题。当我在块7之后按上箭头按钮和向下箭头按钮时，这些块应该保持在原来的位置，但当黄色块位于块8、块9、块10、块11、块12、块13、块14、块15、块16和块17时，它们就会向上移动。( "

浏览 4提问于2013-09-26得票数 1

回答已采纳

2回答

尝试创建一个简单的img图库-我的箭头不能正常工作。请帮帮忙。

、

我正在尝试制作一个图片画廊，像这个网站上的一个页面到下一个页面：我下载了一些arrow.png图像来制作箭头，并将它们实现到我的HTML“leftarrow”和“right arrow”是我想放在一边的两个箭头。由于某些原因，鼠标的指针图标(指示锚定标记或链接)将不会显示，除非您将鼠标悬停在右箭头图像的下方。我做错了什么？以下是箭头类的CSS。

浏览 4提问于2012-03-17得票数 0

点击加载更多