純CSS按鈕

任何人都可以給我看一些在css中製作按鈕並不需要圖片的教程嗎？我GOOGLE了它，但一切都涉及圖像...純CSS按鈕

謝謝！

2010-08-16 user377419

你這是什麼想讓按鈕看起來像？ HTML中有一個'

我猜你的Google版本無法使用。我返回了很多鏈接：http：//www.google.ca/search？q = css +按鈕 – 2010-08-16 00:40:34

如果我正確理解你，你想使任意元素看起來像一個按鈕？

那麼... 只是相應地寫CSS！這裏有一個例子開球，這使得鏈接看起來像一個按鈕：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3489881</title> 
     <style> 
      a.button { 
       display: inline-block; 
       padding: 0 2px; 
       background: lightgray; 
       border: 2px outset lightgray; 
       cursor: default; 
      } 
      a.button:active { 
       border-style: inset; 
      } 
     </style> 
    </head> 
    <body> 
     <p><a class="button">link</a> 
    </body> 
</html>

來源

2010-08-16 00:42:46 BalusC

有一點修補這可以做exaclly我想要的感謝 – user377419 2010-08-16 00:59:50

恩，定義「按鈕」？如果你只是想一個基本的按鈕，你甚至不需要CSS，只需使用一個HTML的輸入或按鈕標記...

<input type="button" value="Press me!" />

或

<button>Press me!</button>

來源

2010-08-16 00:36:25 Amber

CSS：

.button{ 
    background-color: #000; 
    color: #FF6600; 
    font: bolder 1.0em Tahoma; 
    border: 1px solid Yellow; 
    padding: 2px; 
} 
.button:hover{ 
    border: 1px solid Red; 
}

HTML：

<input type="button" class="button" value="Button"/> 
<input type="button" class="button" value="Another"/>

試試看：http://jsfiddle.net/eD9sf/

來源

2010-08-16 00:37:33

這裏有一些例子真棒 - Pure CSS Buttons - 不需要任何圖像，但都是合法的按鈕。我認爲你可以給它們中的一些添加一些漸變，但是除此之外它們看起來和Facebook，Twitter，Wordpress等類似。如果你不太瞭解CSS，我建議你只複製其中的一個例子。

來源

2011-07-23 19:30:43 user2647

這是一種沉悶，但得到的伎倆！

h1 { 
    font-family: Arial; 
} 
a { 
    display: inline-block; 
    padding: 2 5px; 
    background: lightgray; 
    border: 5px outset lightgray; 
    cursor: default; 
    text-decoration:none; 
    color: black; 
} 
a:hover { 
    background: gray; 
}

來源

2014-01-26 03:16:53 Nikolas

這是一個非常簡單的設計，但看起來還不錯

body { 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: .8rem; 
 
} 
 

 
.button { 
 
    text-align: center; 
 
    
 
    background-color: #888; 
 
    border-top: 0px solid #fff; /*define the color of the upper border */ 
 
    border-bottom: 3px solid #666; 
 
    border-radius: 2px; 
 
} 
 
.button:hover { 
 
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */ 
 
} 
 
.button:active { 
 
    border-top-width: 2px; /* add this so it gets 'pushed down' */ 
 
    border-bottom-width: 1px; 
 
} 
 
.button a { 
 
    color: #fff; 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: .2rem; 
 
} 
 

 
/* Second button */ 
 
.button-link { 
 
    text-align: center; 
 
    color: #fff; 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: .2rem; 
 
    
 
    background-color: #888; 
 
    border-top: 0px solid #fff; /*define the color of the upper border */ 
 
    border-bottom: 3px solid #666; 
 
    border-radius: 2px; 
 
} 
 
.button-link:hover { 
 
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */ 
 
} 
 
.button-link:active { 
 
    border-top-width: 2px; /* add this so it gets 'pushed down' */ 
 
    border-bottom-width: 1px; 
 
}

<div class="button"><a href="#">Click me</a></div><br/> 
 
<a class="button-link" href="#">Click me, link only</a>

來源

2015-05-05 17:02:26

這一個看起來很可愛，acording我:)

.button { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(61, 51, 119, 1); 
    font-weight: 500; 
    padding: 9px; 
    box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7); 
    width: 160px; 
    text-align: center; 
    transition: all .3s ease; 
    font-size: 15px; 
    border: none; 
    border-radius: 5px; 
    outline: none; 
    margin: auto; 
    font-family: "Century Gothic"; 
    transform: scale(0.9); 
} 
.button:active { 
    box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9); 
    top: 6px; 
    transform: scale(0.9) translateY(3px); 
} 

<input class = 'button' type = 'button' value = 'Click' />

來源

2017-09-06 13:36:03 Manav

回答

相關問題