Home > Web Front-end > HTML Tutorial > 看下这个按钮是怎么做的呢?_html/css_WEB-ITnose

看下这个按钮是怎么做的呢?_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:15:14
Original
899 people have browsed it


          



这是一个普通的输入框提交按钮,鼠标移动上去颜色就变得 更深了,是怎么实现的?换背景色还是换图片?  还有就是 圆角怎么做的呢? 有空的大神跟我说说呗~    感觉这个按钮好漂亮啊~~


回复讨论(解决方案)

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title>页面名称</title><style type="text/css">.ad { 	width: 70px;	height: 30px;	text-align: center;	font-size: 16px;	line-height: 30px;	color: #fff;	background-color: #279ef5;	border-radius: 5px;	cursor:default;}.ad:hover {	background-color: #0a7dd3;}.ad:active {	color: #ff0000;	background-color: #61b8f8;}</style></head><body><div class="ad">按钮</div></body></html>
Copy after login
Copy after login
Copy after login

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title>页面名称</title><style type="text/css">.ad { 	width: 70px;	height: 30px;	text-align: center;	font-size: 16px;	line-height: 30px;	color: #fff;	background-color: #279ef5;	border-radius: 5px;	cursor:default;}.ad:hover {	background-color: #0a7dd3;}.ad:active {	color: #ff0000;	background-color: #61b8f8;}</style></head><body><div class="ad">按钮</div></body></html>
Copy after login
Copy after login
Copy after login




哇塞! 你也太牛了。

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title>页面名称</title><style type="text/css">.ad { 	width: 70px;	height: 30px;	text-align: center;	font-size: 16px;	line-height: 30px;	color: #fff;	background-color: #279ef5;	border-radius: 5px;	cursor:default;}.ad:hover {	background-color: #0a7dd3;}.ad:active {	color: #ff0000;	background-color: #61b8f8;}</style></head><body><div class="ad">按钮</div></body></html>
Copy after login
Copy after login
Copy after login



谢谢你!对我很有用~
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template