button按钮下边框有立体效果样式

最新推荐文章于 2024-04-30 14:40:32 发布

weixin_30267785

最新推荐文章于 2024-04-30 14:40:32 发布

阅读量1k

点赞数

文章标签： c# 游戏 java

原文链接：http://www.cnblogs.com/zhujiasheng/p/6134287.html

版权


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.Button {
    display: inline-block;
    margin: 0;
    min-width: 100px;
    padding: .5rem;
    border: 1px solid;
    border-color: #3ec9cb;
    border-radius: 2px;
    background: #3ec9cb;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    -webkit-transition-property: border-color,background-color,color;
    transition-property: border-color,background-color,color;
}
.Button.u-cta {
    border-bottom-color: #189697;
    border-bottom-width: thick;
}

.Button.u-large {
    font-size: 1.25rem;
    padding: .75em;
}
	</style>
	<button class="Button l-w-100 l-ma0 l-h5 u-large u-cta" data-reactid="7">Subscribe</button>
</body>
</html>

转载于:https://www.cnblogs.com/zhujiasheng/p/6134287.html

weixin_30267785

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
button按钮下边框有立体效果样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <style> .Button { dis...
复制链接

扫一扫