html按钮按下效果_如何用HTML实现简单按钮样式

本篇文章主要给大家介绍如何用HTML实现简单的按钮样式。

在网页设计过程中，按钮的设置可以说是最为常见且基础的一项html/css知识技能。

程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）zhuanlan.zhihu.com

下面就通过代码示例给新手朋友们介绍用HTML实现简单按钮样式的方法。

button按钮样式代码示例如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>button按钮样式</title><style>.button1 {-webkit-transition-duration: 0.4s;transition-duration: 0.4s;padding: 16px 32px;text-align: center;background-color: white;color: black;border: 2px solid #4CAF50;border-radius:5px;}.button1:hover {background-color: #4CAF50;color: white;}</style>
</head>
<body>
<button class="button1">Green</button>
</body>
</html>

效果如下图：

相关属性介绍：

transition-duration 属性规定完成过渡效果需要花费的时间，-webkit-transition-duration属性是为了兼容浏览器Safari。

text-align属性时规定元素中的文本的水平对齐方式，值为center表示文本水平居中。

border-radius 属性可以让您为元素添加圆角边框。

:hover 选择器用于选择鼠标指针浮动在上面的元素，简单的说就是当鼠标移动到指定元素上时设置新的样式。

相关标签介绍：

<button> 标签定义一个按钮。

这里我们在body中使用的是<button> 标签，当然我们也可以使用div：

<div class="button1">Green</div>

注意，当我们使用div时需要给这个div设置宽度width，那么效果如下：

本篇文章就是关于HTML制作简单的按钮样式，是非常简单的，希望对新手朋友们有一定的帮助！

以上就是如何用HTML实现简单按钮样式的详细内容，更多内容请关注我！

html按钮按下效果_如何用HTML实现简单按钮样式相关推荐

html按钮按下效果_您应该在网站中尝试的8种惊人的HTML按钮悬停效果，让您的网站令人难忘...
HTML按钮悬停效果简介按钮是每个页面,Web应用程序或移动应用程序中经常使用的基本HTML元素. HTML按钮是布局中非常重要的元素,因为在很多情况下,它是用户在呼吁采取行动并说服单击时必须注意到 ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
html按钮按下效果_Animate/FLASH如何为按钮添加声音（无代码）
在游戏制作过程中,按钮在鼠标滑过和点击的时候都会有声音,可以在按钮元件的帧上添加,或者使用代码进行制作,这里先讲如果使用按钮的帧添加交互声音.主要知识点:声音的添加 AnimateCC如何使用声音文件 ...
html按钮按下效果_html提交按钮标签代码是什么，怎么使用？（示例）
本篇文章主要给大家介绍了html提交按钮代码是什么.希望大家对htm提交按钮的标签有所了解. 程序猿的生活:前端10K面试准备,最完整面试真题分享(含答案)!zhuanlan.zhihu.com 以 ...
python turtle画动物_如何用python画简单的动物
首先来看一下实现效果,如下图:程序猿的生活:Python入门到精通资料大汇总,不啰嗦,全是珍藏资料!zhuanlan.zhihu.com 具体实现代码请看: # -*- coding:utf-8 - ...
子程序调用与宏定义的异同_如何用数控系统进行简单的宏程序调用？老师傅告诉你，用G65就行...
什么是简单调用?很多人都不知道吧,如果想要深入操作宏, 就先要学会变量,学会变量之担,再去操作宏,就会变得非常的简单,今天给大家分享如何用G65进行简单的宏程序调用. 用户宏的简单宏调用是指在主程序中 ...
ie8 object param没有效果_如何用php实现分页效果
分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果首先,我们需要准备在数据库里面准备一个表,并且插入数据,这些都是必需的前提工作了,不多说,如图所示(库名为jer ...
html a标签去掉下划线_如何用HTML基本元素制作表格
第2天[HTML基本元素] 主要内容标题标签段落标签强制换行水平线图片超链接文本格式化标签列表表格学习目标一.标题标题(Heading)是通过 <h1> - < ...

html按钮按下效果_如何用HTML实现简单按钮样式

html按钮按下效果_如何用HTML实现简单按钮样式相关推荐

最新文章

热门文章