html - CSS 按钮未正确对齐
问题描述
我通过编辑“Vincent Durand 的简单悬停效果”制作了这个按钮。但问题是我博客中的一些 css 是重叠的。所以它没有正确对齐中间。我找不到它可能是哪一个。我尝试在某些地方使用 !important 标签。但我想它没有成功。我需要知道我应该在哪里使用 !important 在此代码中将按钮对齐到中间?还是我需要一个新的 CSS 元素来做到这一点?
<!-- Awesome button css Start -->
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
解决方案
添加*{box-sizing:border-box;}
到你的 CSS
<!-- Awesome button css Start -->
*{box-sizing:border-box;}
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
推荐阅读
- php - 基于 url 字符串在 iframe 中加载页面
- android - 添加 placeautocomplete 编译时未找到与给定名称匹配的资源(在“背景...”处)
- c# - 在 Asp.net Core 中使用 InstaSharper 将照片上传到 Instagram
- android - kotlin Android Studio 标签布局
- android - android:相对布局中两个文本视图之间的间隙
- vb.net - vb.net vbcrlf、environment.newline & vbcr 不工作
- python - Python 脚本将两个 wav 文件合并,而不是取消它们之间的共同幅度
- r - R中我的时间序列趋势中的NA值
- webpack - 如何解决语法错误:Webpack postcss 加载器不必要的大括号?
- sql-server - SQL Server Always Encrypted:操作数类型冲突:varchar 与 varchar(max) 不兼容