按钮在网站中可说是不可缺少的重要元件,今天就来学习<button>
标签的使用方法吧~
首先在HTML创建<button>
标签,<button>
会建立一个可以点击的按钮,也可以依需求使用<div><a>
标签来制作,<button>
使用上会直觉一点,这里就简单介绍一下!
type可以为<button>
元素指定属性,告诉浏览器它是什麽类型的按钮
<button type="button">
该按钮是可以点击的按钮<button type="submit">
该按钮式提交按钮<button type="reset">
该按钮是重置(清除)按钮<button type="button" class="button1"> Button </button>
再来用CSS修改掉预设的按钮样式,如果觉得CSS的样式不满意,也可以自己设计好按钮的图後用<background-image: url ('图片网址');>
丢进来喔!
.button1 {
padding: 15px 32px;
text-align: center; /* 文字置中*/
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
background-color: white;
color: black;
border: 2px solid #000; /* 外框样式*/
border-radius:25px; /***** 调整成圆角外框*/
}
可以新增一些滑鼠效果,增加网页的互动性!
.button1:hover {
background-color: #000;
color: white;
transition: all .3s linear;/* 添加过渡效果*/
}
大家可以用codepen去尝试看看,做出想要的按钮样式,网页中有许多需要使用到按钮的地方,像是购物车、收藏、注册会员等,添加一些微动画可以让页面更加生动喔!
这里再分享一个进阶一点的样式,点击後可以展开的按钮。
HTML :
<body>
<div class="BTN">
<a class="button" href="#">
<span>加入购物车</span>
</a>
</div>
</body>
CSS :
*{
position:relative;
}
html,body{
height:100%;
}
.BTN{
height:100%;
background-color:#000;
}
.button{
color:#ffbb33;
text-decoration:none;
border:1px solid #ffbb33;
background-color:#ffbb33;
border-radius:28px;
font-family:Roboto;
display:inline-block;
line-height:56px;
width:56px;
position:absolute;
left:100px;
top:50px;
transition:all 0.3s;
}
.button:hover{
padding:0 25px;
background-color:#000;
width:auto; /* 用字去撑开宽度*/
}
.button span{
white-space: nowrap; /* 强制不换行*/
opacity:0;
}
.button:after{ /* 创建伪元素*/
content:"+";
font-size:36px;
line-height:50px;
color:#000;
position:absolute;
left:18px;
top:0;
}
.button:hover:after{
opacity:0; /* 利用伪元素达到滑鼠效果*/
}
.button:hover span{
opacity:1;/* 利用伪元素达到滑鼠效果*/
}
这些基本上都是前面有提到CSS标签,可以尝试去看懂结构,就可以写出属於自己的独特按钮样式了~那麽今天的按钮就介绍到这里了,明天会继续跟大家分享其他网站元件的制作方法喔!
表单标签主要功用是用来收集使用者资料 常用情况 : 注册页面... 主要由 表单域、表单元素、提示文...
Genero FGL为一个出自於资料库的语言,但怎麽和资料库搭上边的,我们还是需要来做一下理解。 ...
在上篇有提到用 Selenium + WebDriver 就可以让程序帮你自动发文, 但有试过的朋友...
正如Day 04 - Spring Boot 的前世今生所说,Spring Boot 为了简化设定提...
React 的核心之一是 JSX 语法, 这意味着整个网页内容,包含 HTML 与 CSS, 基本上...