Question

有人能告诉我一些在css中制作按钮并且不需要图像的教程吗？我用谷歌搜索了所有图片......

谢谢！

Answer 1

嗯，定义“按钮”？如果你只想要一个基本按钮，你甚至不需要CSS，只需使用HTML输入或按钮标签......

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

或

<button>Press me!</button>

Answer 2

如果我理解正确，你想让任意元素看起来像一个按钮吗？

嗯...... 只是相应地写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>

Answer 3

这个有点沉闷但是完成了诀窍！

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;
}

Answer 4

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/

Answer 5

这里有一些很棒的例子 - Pure CSS Buttons - 按钮不需要任何图像但是合法的。我认为你可以为其中一些添加一些渐变，但是否则它们看起来就像Facebook，Twitter，Wordpress等上的那些。如果你不太了解CSS，我建议你只复制其中一个实例

Answer 6

这是一个非常简单的设计，但看起来很不错

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 7

这个看起来很可爱，根据我的说法：）

.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' />

纯CSS按钮

7 个答案: