logo标签列表

纯CSS按钮

htmlcss
3

请问有没有一些关于在CSS中制作按钮的教程，而且不需要图片的呢？我在谷歌上搜索了，但是所有的教程都涉及到使用图片...

谢谢！

1
你想让按钮看起来怎么样？HTML 中有一个 <button> 标签不需要图片。 - Jacob
5
我猜测你的谷歌版本无法使用。我的搜索结果返回了许多链接：http://www.google.ca/search?q=css+button - Gert Grenander
7个回答
4

您好，"button"是什么意思？如果您只需要一个基本的按钮，您甚至不需要CSS，只需使用HTML的input或button标签即可...

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

或者

<button>Press me!</button>
3

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

那么...只需要编写相应的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>
稍加调整，这个可以完全满足我的需求，谢谢。 - user377419
1
这个有点沉闷，但能完成任务！
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;
}
0

在我看来，这个看起来很可爱 :)

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

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/
0
这里有一些很棒的例子 - 纯CSS按钮 - 这些按钮不需要任何图片，但是非常正宗。我认为你可以给其中一些添加渐变效果，但除此之外，它们看起来与Facebook、Twitter、Wordpress等网站上的按钮完全一样。如果你对CSS不太了解，我建议你只需复制其中一个例子即可。
0

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

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接