CSS——模仿按钮2(hover)
2017-10-18 19:48
183 查看
模仿按钮如下：（模仿的是w3school http://www.w3school.com.cn/cssref/selector_nth-child.asp）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
text-decoration: none;
}
.search_btn {
display: inline-block;
padding: 0 40px;
text-align: center;
color: #FFF;
background-color: rgb(233,104,107);
height: 42px;
margin-right: 10px;
border: none;
font-size: 14px;
line-height: 42px;
border-radius: 5px;
vertical-align: middle;
font-family: 微软雅黑;
transition: 0.2s ease-out;
}
.search_btn:hover {
background-color: #ba3537;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="search_btn">搜索</a>
</body>
</html>效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
text-decoration: none;
}
.search_btn {
display: inline-block;
padding: 0 40px;
text-align: center;
color: #FFF;
background-color: rgb(233,104,107);
height: 42px;
margin-right: 10px;
border: none;
font-size: 14px;
line-height: 42px;
border-radius: 5px;
vertical-align: middle;
font-family: 微软雅黑;
transition: 0.2s ease-out;
}
.search_btn:hover {
background-color: #ba3537;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="search_btn">搜索</a>
</body>
</html>效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 按钮hover状态的css实现
- inut按钮hover时变化的css控制方法
- jQuery实现简单的导航按钮焦点背景更换（代替css hover）以及弹出子菜单 我的第一篇博文
- CSS——模仿按钮1
- inut按钮hover时变化的css控制代码
- 纯css模仿微信switch开关按钮
- 模仿“百度”及 改变按钮、文本框样式（CSS）
- inut按钮hover时变化的css控制方法
- 10个CSS+HOVER 的创意按钮
- 纯CSS打造好看的按钮样式
- CSS 文本域和按钮对齐
- Bootstrap-全局css样式之按钮
- js+css实现回到顶部按钮（back to top）
- 通过CSS效果：隔行变色和鼠标掠过高亮，学习JQuey的css()、hover()方法
- csshover.htc可以解决ie6下hover不起作用等兼容问题
- 模仿百度 图片 导航栏 做的一个HTML+CSS的代码
- a标签的四个css伪类(link、visited、hover、active)样式理解
- css超炫样式按钮
- CSS特殊按钮样式
- CSS链接的样式a:link,a:visited,a:hover,a:active