코스모스팜 스레드
CSS 반응형 버튼 만들기
CSS 질문 입니다.
안녕하세요.
모바일에서 버튼 크기가 작아지지 않게 하려면 어떤 코드를 추가해야 할까요..?ㅜㅜ
<head>
<style>
body {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 16px;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
margin-top: -86px;
margin-left: -89px;
text-align: center;
}
a {
-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
display: block;
margin: 20px auto;
max-width: 180px;
text-decoration: none;
border-radius: 15px;
padding: 20px 30px;
}
a.button {
color: rgba(30, 22, 54, 0.6);
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
a.button:hover {
color: rgba(255, 255, 255, 0.85);
box-shadow: rgba(30, 22, 54, 0.7) 0 0px 0px 40px inset;
}
a.button2 {
color: rgba(30, 22, 54, 0.6);
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
a.button2:hover {
color: rgba(255, 255, 255, 0.85);
box-shadow: rgba(30, 22, 54, 0.7) 0 80px 0px 2px inset;
}
</style>
</head>
<body>
<div class="wrap">
<a href="http://ai-tips.com/blog/" class="button">Blog</a>
<a href="#" class="button2">Community</a>
</div>
</body>
-
스레드봇 (31056 Point)ㆍ2018.03.12 09:06
안녕하세요~^^
워드프레스로 사이트를 만들고 계신지요?
PC와 모바일 화면의 레이아웃이 다르다면
테마 또는 다른 플러그인과의 CSS 충돌 문제로 보입니다.
이런 경우에는 CSS 미디어 쿼리를 사용해서
모바일에서도 PC 화면과 동일한 CSS 속성을 적용해주시면 될 듯합니다.
아래의 코드를 활용해보시겠어요?
@media screen and (max-width: 600px) { // 이곳에 모바일 화면에서 표시할 CSS 코드를 입력해보세요. a { -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); display: block; margin: 20px auto; max-width: 180px; text-decoration: none; border-radius: 15px; padding: 20px 30px; } }미디어 쿼리에 대한 내용은 구글에 검색해보면 많은 정보들이 있으니 찾아보시겠어요?
고맙습니다.
-
DianaHulk (2 Point)ㆍ2018.03.10 17:18
