링크를 버튼처럼 보이게

링크를 버튼처럼 보이게 하는 방법은 무엇입니까?

---

이 버튼 이미지가 있습니다.

<a href="">some words</a>그 링크가 그 버튼으로 나타나 도록 심플 하고 스타일링이 가능한지 궁금합니다 .

가능하다면 어떻게해야합니까?

---

CSS 사용 :

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

---

Bootstrap의 문서를 확인하십시오 . 클래스 .btn가 존재하고 a태그 와 함께 작동 하지만 .btn-*클래스와 함께 특정 클래스 를 추가해야합니다 .btn.

예 : <a class="btn btn-info"></a>

---

다음은 버튼과 비슷합니다.

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

예제는 http://jsfiddle.net/r7v5c/1/ 를 참조하십시오 .

---

이렇게 링크로 버튼을 쉽게 감쌀 수 있습니다. <a href="#"> <button>my button </button> </a>

---

1. 이 시도:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
   <div class="container">
     <h2>Button Tags</h2>
     <a href="#" class="btn btn-info" role="button">Link Button</a>
     <button type="button" class="btn btn-info">Button</button>
     <input type="button" class="btn btn-info" value="Input Button">
     <input type="submit" class="btn btn-info" value="Submit Button">
   </div>

2. href거기에서 태그 라인을 사용할 수 있습니다 .

   <a href="URL" class="btn btn-info" role="button">Button Text</a>
   

---

CSS를 사용하여 특정 디자인을 하드 코딩하지 않고 브라우저의 기본 버튼에 의존하고 싶다면 다음 CSS를 사용할 수 있습니다.

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

IE에서는 작동하지 않을 것입니다.

---

다른 답변은 링크 버튼이 마우스 오버시 모양을 변경하는 코드를 표시하지 않습니다.

이것은 내가 그것을 고치기 위해 한 일입니다.

HTML :

<a href="http://www.google.com" class="link_button2">My button</a>

CSS :

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle : https://jsfiddle.net/adamovic/ovu3k0cj/

---

• 태그 background-image에 CSS 속성 사용<a>
• 설정 display:block및 조정 width과 heightCSS에

이것은 트릭을해야합니다.

---

네, 할 수 있습니다.

다음은 예입니다.

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

물론 필요에 따라 위의 예를 수정할 수 있습니다. 중요한 것은 블록 ( display:block) 또는 인라인 블록 ( display:inline-block)으로 표시되도록하는 것입니다 .

---

For basic HTML, you can just add an img tag with the src set to your image URL inside the HREF (A)

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>

---

You can create a class for the anchor elements that you would like to display as buttons.

Eg:

Using an image :

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

or using a pure CSS approach:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

Always remember to hide the text with something like:

text-indent: -9999em;

An excellent gallery of pure CSS buttons is here and you can even use the css3 button generator

Plenty of styles and choices are here

good luck

---

Just take regular css button designs, and apply that CSS to a link (in exactly the same way as you would to a button).

Example:

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>

---

You have got two options for consistency.

1. Use framework-specific tags, and use them throughout the website.
2. JavaScript를 사용하여 단추 요소에 대한 링크를 에뮬레이트 한 다음 단추가 브라우저의 단추 모양과 일치하도록합니다. CSS 버튼 모양의 해킹은 절대 정확하지 않습니다.

.

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false; 버튼이 클릭되는 기본 동작을 방지하는 것입니다.

---

활성 및 초점을 추가 한 후 문제가있는 사람들을 위해 버튼에 클래스 또는 ID 이름을 제공하고 이것을 CSS에 추가하십시오.

예를 들면

// html 코드

<button id="aboutus">ABOUT US</button>

// css 코드

#aboutus{background-color: white;border:none;outline-style: none;}

---

Chromium 40 및 Firefox 36에서 테스트 됨

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

---

이 코드를 시도하십시오.

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

이것을 시청하십시오 (방법을 설명합니다) -https : //youtu.be/euti4HAJJfk

---

다음과 같이 간단합니다.

<a href="#" class="btn btn-success" role="button">link</a>

"class ="btn btn-success "및 role = button 만 추가하면됩니다.

참고 URL : https://stackoverflow.com/questions/8357058/how-to-make-a-href-link-look-like-a-button