一
a{ width: 157px;
line-height: 180%;
background: #fff;
text-align: center;
padding: 5px;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
overflow: hidden;
border-radius: 8px;
border: 1px solid #ececec;
-webkit-transition-duration: .5s;
transition-duration: .5s;
height: 38px;-webkit-tap-highlight-color: rgba(255,0,0,0); color: #333;
text-decoration: none;
}
a:hover {
border: 1px solid #4d8cb8;
transition: all 0.1s ease-in 0s;
}
二
a {
color: #7fba00;
font-size: 14px;
line-height: 38px;
text-align: center;
border: 1px dashed rgba(0, 0, 0, .2);
padding: 0 3px;
box-sizing: border-box;
float: left;
width: 11.5%;
height: 38px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 0.5% 6px;
text-decoration: none;
transition: all .6s;
font-weight: bold;
}
a:hover {
color: #fff !important;
background: #7fba00;
transition: all .6s;
}
三
a {
width: 130px;
cursor: pointer;
max-height: 40px;
line-height: 40px;
color: #fff;
box-shadow: none;
border: 0;
overflow: hidden;
z-index: 10;
border-radius: 10px;
margin: 0 0.5% 6px;
font-size: .7rem;
display: inline-block;
text-decoration: none;
text-align: center;
background-color: rgba(0, 0, 0, 0.40)!important;
font-weight: bold;
}
a:hover {
color: #fff!important;
transition: all .6s;
background-color: DeepSkyBlue!important;
}
四
(文字颜色为黑色)彩色需配合:
css循环色超链接样式示例 - 维洛BLOG
https://b.xn--xu0a.cn/index.php/archives/1423/
a {
width: 15.5%;
cursor: pointer;
max-height: 40px;
line-height: 40px;
color: #000;
box-shadow: none;
border: 1px dotted rgba(0, 0, 0, .5);
overflow: hidden;
z-index: 10;
border-radius: 10px;
margin: 0 0.5% 6px;
font-size: .7rem;
display: inline-block;
text-decoration: none;
text-align: center;
font-weight: bold;
}
a:hover {
color: #fff!important;
transform: translateY(-.125rem);
}