30天打造品牌特色电商网站 Day.16 微互动设计按钮实作(2)

按钮在网站中可说是不可缺少的重要元件,今天就来学习<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去尝试看看,做出想要的按钮样式,网页中有许多需要使用到按钮的地方,像是购物车、收藏、注册会员等,添加一些微动画可以让页面更加生动喔!

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;/* 利用伪元素达到滑鼠效果*/
}

codepen查看范例样式

这些基本上都是前面有提到CSS标签,可以尝试去看懂结构,就可以写出属於自己的独特按钮样式了~那麽今天的按钮就介绍到这里了,明天会继续跟大家分享其他网站元件的制作方法喔!


<<:  常用工具介绍(1)-postman、ngrok

>>:  DeBug Day 26

Day 04 HTML<表单标签>

表单标签主要功用是用来收集使用者资料 常用情况 : 注册页面... 主要由 表单域、表单元素、提示文...

[FGL] 再探资料库 - 使用 fgldbsch 工具

Genero FGL为一个出自於资料库的语言,但怎麽和资料库搭上边的,我们还是需要来做一下理解。 ...

[Day12] WebDriver安装教学aka自动发文器第二集

在上篇有提到用 Selenium + WebDriver 就可以让程序帮你自动发文, 但有试过的朋友...

Day 07 - Spring Boot 常用依赖

正如Day 04 - Spring Boot 的前世今生所说,Spring Boot 为了简化设定提...

【Day03】渲染元素 Rendering Element

React 的核心之一是 JSX 语法, 这意味着整个网页内容,包含 HTML 与 CSS, 基本上...