用CSS样式制作按钮式超链接

最新推荐文章于 2024-04-19 12:52:58 发布
最新推荐文章于 2024-04-19 12:52:58 发布
阅读量805 收藏 1
点赞数
分类专栏： Web前端RIA 文章标签： CSS WEB前端 RIA

a:link--用来定义未访问过的超链接样式

a:visited--用来定义访问过的超链接样式

a:active--用来定义活动的超级链接(即获得当前焦点的链接)

a:hover--用来定义有鼠标悬停的链接样式

<html>
	<head>
		<style type="text/css">
			a{
					font-family:Arial;
					font-size:21px;
					text-align:center;
					margin:3px;
			}
			a:link,a:visited{
					color:#002020;
					backgroud-color:blue;
					border-top:1px solid #EE00EE	/*边框阴影效果*/
					border-left:1px solid #EE00EE
					border-bottom:1px solid #720072
					border-right:1px solid #720072
					
			}
			a:hover{
					color:#930220;	                /*改变文字颜色*/
					padding:5px 8px 3px 12px;
					backgroud-color:green;		/*改变背景颜色*/
					border-top:1px solid #720072	
					border-left:1px solid #720072
					border-bottom:1px solid #EE00EE
					border-right:1px solid #EE00EE
			}
		  </style>
	</head>
  <body>
	<a href="#">Back to Home</a>
  </body>
</html>

 

Xiaohao0304
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS（十一）——用CSS设置超链接样式
程序员的时光
03-14 1799
目录 1.使用CSS伪类别来设置超链接样式 1.1普通的、未被访问的链接 1.2用户已访问的链接 1.3鼠标指针位于链接的上方 2.创建按钮式超链接 2.1设置三个超链接（默认格式） 2.2设置超链接的边距和字体格式 2.3设置类似于按钮格式的超链接 2.4设置点击按钮后的动态效果 1.使用CSS伪类别来设置超链接样式 链接的四种状态： a:link：普通的、未被访问的...
CSS-设置超链接样式
cc098818的博客
08-13 1659
1、使用 CSS 伪类别来设置超链接样式 链接的四种状态： a:link：普通的、未被访问的链接 a:visited：用户已访问的链接 a:hover：鼠标指针位于链接的上方 a:active：链接被点击的时刻 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用C...
css案例学习之按钮超链接
weixin_34198453的博客
11-30 165
效果   css实现 &lt;html&gt; &lt;head&gt; &lt;title&gt;按钮超链接&lt;/title&gt; &lt;style&gt; a{ /* 统一设置所有样式 */ font-family: Arial; font-size: ....
纯css 超链接变按钮
dliverol30914的博客
04-12 226
a{ font-family:Arial; font-size:.8em; text-align:center; margin:3px;}a:link,a:visited{ color:#A62020; padding:4px 10px;　　/*鼠标放上前字体位置*/ background-color:#ecd8db; text-decor...
CSS设置按钮式超链接
天高任鸟飞
11-20 6809
CSS设置按钮式超链接           网页上有很多超链接都是按钮的形式，这些都使用了各种图片，这里通过CSS普通的属性实现按钮的效果。           首先，建立最简单的HTML页面，代码如下： 首页 心情日记
CSS 按钮式链接
歪脖先生的博客
02-21 1944
按钮式链接在任何浏览器下，默认的链接都太过平淡，不能满足大多数人的需求。尤其是希望有特大点击区域的链接，比如制作主导航链接、手风琴菜单、按钮等链接时，默认的链接更是无能为力，而按钮式链接便可担此重任。CSS 链接默认是行内元素，只能通过链接文本来激活链接。要想让链接像按钮一样，较大的点击区域，其实很简单。只需为链接添加合适的内边距，并设置类似按钮的背景和边框即可。a  {    padding: ...
CSS3 之高级动画（1）CSS3超链接按钮
weixin_30526593的博客
03-22 329
参看：CSS3自定义样式超链接按钮 鼠标滑过带动画特效 参考链接 html： <ul class="list"> <li class="type01"> <a href="#" class="btn"> <span class="r-link">动画特效</span> ...
css 浮雕式超链接
08-21
以下是一个简单的浮雕式超链接的CSS代码示例： ```css a { display: inline-block; /* 使链接可以设置宽高 */ padding: 5px 10px; /* 添加内边距以模拟立体感 */ border: 2px solid #333; /* 设置边框，增加立体...
HTML 按钮超链接
08-12
HTML（HyperText Markup Language）是构建网页的基本...通过合理使用`<button>`、`<a>`以及相关的CSS样式，我们可以创建出美观且功能齐全的网页元素。对于初学者来说，掌握这些基础知识是迈向专业前端开发的第一步。
js 外观类似按钮的超链接
01-05
1. **CSS样式调整**：使用CSS，我们可以改变超链接的默认样式，使其更接近按钮。例如，添加圆角、背景色、边框、内阴影等属性，如下所示： ```css .link-button { display: inline-block; padding: 0.5rem 1rem; ...
HTML5 | 实用Tips - 4 - 超链接样式大全
DLQFHL的博客
06-24 3337
在007、017我们只是简单使用了，href 的超链接功能，这次详细介绍下所有用法 我先从 W3c - CSS 手册，把官方伪类样式说明给你看下： ​ 就是四种： 1.a:link 设置a对象在未被访问前（未点击过和鼠标未经过）的样式表属性。 也就是html a锚文本标签的内容初始样式。 2.a:hover 设置对象在其鼠标悬停时的样式表属性。 也就是鼠标刚刚经...
web初探-css-设置超链接样式
大碗宽面的博客
08-04 1575
使用 CSS 伪类别来设置超链接样式 链接的四种状态： a:link：普通的、未被访问的链接 a:visited：用户已访问的链接 a:hover：鼠标指针位于链接的上方 a:active：链接被点击的时刻 可以： a:link{ ... } 这样，设置属性，它也是一种选择器 创建按钮式超链接 就是对颜色边框等设置，模拟出来的按钮效果 代码： <style type = "text/css...
CSS链接按钮示例
yousuf007的专栏
08-06 717
<br />#elButton1a/*关闭button(使<a>有<button>的效果)*/<br />{<br />     background: transparenturl('../../Content/Images/button_bg.jpg')no-repeatscrolltopright;<br />     text-decoration: none;<br />     height:auto;<br />     width:80px;<br />     padding-left:1
正点CSS实例--简单链接按钮
程序员成长之路
09-19 470
首页     心情日记     学习心得     工作笔记     生活琐碎     其他 a{                                        /* 统一设置所有样式 */     font-family: Ari
css 链接设计,css将超链接a设计成按钮样式实例
weixin_39528029的博客
08-03 1079
这篇文章主要为大家详细介绍了css将超链接a设计成按钮样式实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。刚接到一个用户的要求，想把button样式用超链接a写出来，如下图：上面的登陆按钮是button代码，实现代码如下：1、button的CSS代码.btn-submit{width:100%;border:none;outline:none;height...
CSS入门：link链接样式和4种状态的详解
最新发布
u013179804的博客
04-19 1874
我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。访问后的样式：当鼠标点击过过链接时，是紫色。那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色。
简单的CSS在页面中点击超链接跳转新的页面
weixin_53177153的博客
02-21 5907
这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。作用：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口（在整个窗口中打开被链接文档）点击超链接后，重新打开一个新的网页，不是在原本的网页进行跳转。就可以跳转到新的一个页面。
CSS学习之途（超链接）
ChaoDaZhi的博客
05-25 1367
之前的笔记都存在onenote中，突然想起还有CSDN这种公共平台可以分享一下自己的学习之路 希望能通过这种方式不断激励自己并能和大家一起进步！ 链接的四种状态： 首先插入链接 <a href="HTTP://www.baidu.com">超链接</a> a:link 普通的 未被访问的链接 a:LINK{ color: red; text-decoration: none; } 设置链接字体为红色，并不显示下划线 a:vis...
HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式
热门推荐
别样的风采是我
07-28 1万+
注：样式实现的功能：按钮变成超链接。其他代码是可编辑table，如果不可行可能是引用的jquery.min.js版本问题
CSS样式表详解：超链接与页面布局
本文主要介绍了超链接的常用样式属性以及CSS样式表在页面布局中的应用。在Web开发中，CSS（层叠样式表）是用于控制网页元素外观的关键工具，能够实现内容与样式的分离，提高页面设计的灵活性和可维护性。 为什么...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值