如何禁用鏈接上的鏈接顏色更改？

Question

我有一個按鈕，我希望文本字體顏色爲紅色，但它仍然是灰色的，因爲它之前已被點擊過。如何禁用此鏈接的鏈接顏色更改？

index.html.erb

<button class="button"><%= link_to 'New Value', new_value_path %></button>

values.css.scss

.button { 
 
    padding: 10px 15px; 
 
    background: #4479BA; 
 
    color: #FF0000; 
 
}

scaffolds.css.scss

body { 
 
    background-color: #fff; 
 
    color: #333; 
 
    font-family: verdana, arial, helvetica, sans-serif; 
 
    font-size: 13px; 
 
    line-height: 18px; 
 
} 
 

 
p, ol, ul, td { 
 
    font-family: verdana, arial, helvetica, sans-serif; 
 
    font-size: 13px; 
 
    line-height: 18px; 
 
} 
 

 
pre { 
 
    background-color: #eee; 
 
    padding: 10px; 
 
    font-size: 11px; 
 
} 
 

 
a { 
 
    color: #000; 
 
    &:visited { 
 
    color: #666; 
 
    } 
 
    &:hover { 
 
    color: #fff; 
 
    background-color: #000; 
 
    } 
 
} 
 

 
div { 
 
    &.field, &.actions { 
 
    margin-bottom: 10px; 
 
    } 
 
} 
 

 
#notice { 
 
    color: green; 
 
} 
 

 
.field_with_errors { 
 
    padding: 2px; 
 
    background-color: red; 
 
    display: table; 
 
} 
 

 
#error_explanation { 
 
    width: 450px; 
 
    border: 2px solid red; 
 
    padding: 7px; 
 
    padding-bottom: 0; 
 
    margin-bottom: 20px; 
 
    background-color: #f0f0f0; 
 
    h2 { 
 
    text-align: left; 
 
    font-weight: bold; 
 
    padding: 5px 5px 5px 15px; 
 
    font-size: 12px; 
 
    margin: -7px; 
 
    margin-bottom: 0px; 
 
    background-color: #c00; 
 
    color: #fff; 
 
    } 
 
    ul li { 
 
    font-size: 12px; 
 
    list-style: square; 
 
    } 
 
}

Answer 1

這是無效 HTML - anchor不能成爲button內。

你最好的選擇是風格的anchor看起來像一個button：

.btn { 
 
    background: #3498db; 
 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
    -webkit-border-radius: 28; 
 
    -moz-border-radius: 28; 
 
    border-radius: 28px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
.btn:hover { 
 
    background: #3cb0fd; 
 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
 
    text-decoration: none; 
 
} 
 

 
.btn:active{ 
 
    color:red; 
 
}

<a href="" class="btn">I'm a button</a>

從css3buttongenerator使用的樣式，並添加.btn:active添加一些樣式被點擊anchor時並保持這樣（注意color:red）。

或者使button到像anchor行爲 - How to create an HTML button that acts like a link?

更新

要與鐵軌使用它link_to幫手，這樣使用它：

<%= link_to "I'm a button", new_value_path, class: 'btn' %>