html과 css를 사용하는 버튼 효과

내가 원하는 것은 : link, a : hover 등과 같이이 버튼에 링크 규칙을 적용하는 것입니다. 그러나 모든 링크를 변경하기 때문에 태그를 사용하고 싶지 않습니다. 페이지에. 누구든지 제발 도와 주실 래요?html과 css를 사용하는 버튼 효과

여기 내 HTML입니다 : a 요소가 button 요소에 포함되는 여기

<html> 
    <head> 
     <title>Button</title> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" href="stylesheet.css"> 
    </head> 
    <body> 
     <button><a href="#">Button</a></button> 
    </body> 
</html>

내 CSS 우선 들어

button { 
    color: #003739; 
    background-color: #00bb89; 
    padding: 6px 18px; 
    border-radius: 100px; 
    border: 2px solid #007e5c; 
    background: linear-gradient(#00dda1, #00956d); 
    box-shadow: inset 0 0 2px white; 
    text-shadow: 0px 1px 1px white; 
    box-shadow: 0px 2px 5px #d0d0d0; 
    cursor: pointer; 
}

출처

2014-04-25 user3567911

[**이 ** (http://jsfiddle.net/f5uGn/을 찾고를)? –

'a : visited'기능을 제외하고는 거의 가능합니다.이 기능은 순수한 CSS와 거의 유사하지 않습니다. –

@KingKing, 모방하는 것이 가능합니까? –

, 그것은 유효하지 않습니다.

당신은 그 대신에 button role attribute과 스타일 당신의 a 요소를 제공한다 할 수있는 일 :

<a href="#" role="button"></a>

a[role="button"]:link { 
    ... 
} 

a[role="button"]:hover { 
    ... 
} 

...

출처

2014-04-25 08:13:06

OP는 그가'a' 태그를 사용하고 싶지 않았 음을 분명히 밝혔습니다. 그렇지 않으면 우리는 항상 버튼처럼 보이게하기 위해'a' 태그를 스타일링합니다. –

@KingKing OP는 자신의 페이지에있는 모든 링크를 변경하기 때문에'a' 태그를 사용하고 싶지 않다고 말합니다. 이것이 위의 예에서 나머지 부분과 링크를 구별 할 수 있도록 'role'버튼을 추가 한 이유입니다. –

아 나는 그가 의미하는 것을 이해합니다. 그렇다면 우리는 항상'class'를 대신 추가 할 수 있습니다. –

html과 css를 사용하는 버튼 효과

답변

관련 문제