공백 버튼이 있는 경우 CSS에서 애니메이션에서 배경색과 텍스트 색상을 모두 반전합니다.
한 분류에서 모두 설명하는 것도 문제없지만 배경색, 문자색, 경계선, 너비를 바꾸기 위해 다른 분류에서 설명하고 지정했습니다.
<html>
<head>
<title>test</title>
</head>
<style>
/* btn はベースのスタイル。汎用性を高めるために背景色と文字色を別で指定する */
.btn {
text-align: center;
}
.btn a {
position: relative;
display: block;
color: #fff;
transition: .6s ease;
text-decoration: none;
}
.btn a span {
position: relative;
z-index: 2;
}
.btn a::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background: #fff;
opacity: 0;
transition: .4s ease;
transform: scale(0, 1);
transform-origin: center left;
}
.btn a:hover::before {
opacity: 1;
transform: scale(1, 1);
}
/* 背景色と文字色、上下の余白・幅の指定 */
.btn-red {
width: 300px;
border: solid #bb000c 1px;
}
.btn-red a {
background: #bb000c;
padding: 5px 0;
}
.btn-red a:hover {
color: #bb000c;
}
</style>
<body>
<div class="btn btn-red"><a href="#"><span>Button</span></a></div>
</body>
</html>
Reference
이 문제에 관하여(공백 버튼이 있는 경우 CSS에서 애니메이션에서 배경색과 텍스트 색상을 모두 반전합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/4cres/items/a3badf41fbda552576cb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
