纯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

回答

相关问题