css

CSS TIP! – IE, FF에서 <button> 클릭할 때 눌림효과(press effect) 없애는 법

핑계/ editor

  • 1 comments
  • 3,966 views
  • 2017년 9월 2일

Internet Explorer, Firefox 에서 <button> 클릭하면 눌림효과(press effect) 가 발생하죠??
눈에 거슬리지 않나요???
이번 시간에는 <button> 눌림효과(press effect) 없애는 법에 대해서 알아보아요~

<button>을 클릭하면 다른 브라우저에서는 괜찮은데 Internet Explorer와 최신 Firefox 브라우저에서는
눌림효과(press effect)가 발생합니다.

IE와 FF에서만 효과가 발생하는데요~ 모든 브라우저에서의 <button> 스타일을 통일시켜 주기 위해서
눌림효과(press effect) 없애는 법에 대해서 알아보겠습니다.

우선 아래 예제를 봐주세요.

 

Markup

<body>

Internet Explorer 에서 봐주세요.
Firefox 에서도 봐주세요!

</body>

CSS

.main {
    width: 700px;
    margin: 50px auto;
}
.main .btn_grp {
    margin: 0 auto;
    width: 200px;
    height: 50px;
}
.main .btn_grp button {
    width: 90px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: #3F51B5;
    border-radius: 5px;
    border: none;
}
.main .btn_grp button + button {
    margin-left: 15px;
}
.main .btn_grp button:focus {
  outline: none;   /* chrome 에서 버튼 파란 테두리 없애기 */
}
.main .content {
    width: 700px;
    margin: 20px auto;
    font-size: 25px;
    color: red;
    text-align: center;
    display: none;
}

 

아래 예제의 ‘show’, ‘hide’ 버튼을 눌러보세요.
버튼을 누를 때 눌림효과(press effect)가 발생하는 것을 볼 수 있습니다.

– IE에서 클릭(:active)할 때 우측으로 한칸, 아래로 한칸 움직입니다.
– FF에서 클릭(:active)할 때 우측으로만 한칸 움직입니다.

HTML5AROUND on html5around.com

다른 브라우저로 접속한 분들은 아래 GIF를 봐주세요.


 

 

해결방법은 아래와 같습니다.

추가 Markup

<div class="btn_grp"&gT;
  <button class="btn1"&gT;<span>show</span></button> // button 내부를 요소로
  <button class="btn2"&gT;<span>hide</span></button> // 감싸줍니다
</div>

추가 CSS

.main .btn_grp button,
.main .btn_grp button:focus,
.main .btn_grp button:active{
	padding: 0;
}
.main .btn_grp button span{
	position: relative;
}

 

아래 예제의 ‘show’, ‘hide’ 버튼을 눌러보세요.
Internet Explorer와 최신 Firefox 브라우저에서 버튼을 눌러봐도 눌림효과(press effect)가 사라진 것을 볼 수 있습니다.

HTML5AROUND on html5around.com

핑계

댓글 먹고 살아요~

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
seul Recent comment authors
newest oldest most voted
seul
Guest
seul

예제 사이트가 안보여요ㅠ