Fatal编程技术网
  • html/
  • Html 纯CSS按钮

Html 纯CSS按钮

html css

Html 纯CSS按钮,html,css,Html,Css,有谁能给我看一些用css制作按钮而不需要图片的教程吗？我在谷歌上搜索过，但一切都涉及图像 谢谢 嗯，定义“按钮”？如果你只是想要一个基本的按钮，你甚至不需要CSS，只要使用HTML输入或按钮标签 <input type="button" value="Press me!" /> 或 按我！ CSS： HTML: 试试看：如果我理解正确，您想让任意元素看起来像按钮吗 嗯。。。只需编写相应的CSS！下面是一个使链接看起来像按钮的启动示例： <!DOCTYPE html&g

有谁能给我看一些用css制作按钮而不需要图片的教程吗？我在谷歌上搜索过，但一切都涉及图像

谢谢

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

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

按我！
CSS：

HTML:
试试看：

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

嗯。。。只需编写相应的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>


所以问题3489881
a、 钮扣{
显示：内联块；
填充：0.2px；
背景：浅灰色；
边框：2件浅灰色；
游标：默认值；
}
a、 按钮：激活{
边框样式：插图；
}
链接
这里有一些很棒的例子——按钮不需要任何图像，但却是合法的。我想你可以给其中一些添加一些渐变，但是它们看起来与Facebook、Twitter、Wordpress等网站上的完全一样。如果你对CSS了解不多，我建议你只复制其中一个例子。

这一个有点枯燥，但却成功了

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;
}
这是一个非常简单的设计，但看起来相当不错

正文{
字体系列：Helvetica，无衬线；
字体大小：.8rem；
}
.按钮{
文本对齐：居中；
背景色：#888；
边框顶部：0px实心#fff；/*定义上边框的颜色*/
边框底部：3px实心#666；
边界半径：2px；
}
.按钮：悬停{
框阴影：插入0 0 100px 100px rgba（255，255，255，0.1）；/*灯光覆盖*/
}
.按钮：激活{
边框顶部宽度：2px；/*添加此项，使其“向下推”*/
边框底宽：1px；
}
.按钮a{
颜色：#fff；
显示：块；
文字装饰：无；
填充：.2rem；
}
/*第二个按钮*/
.按钮链接{
文本对齐：居中；
颜色：#fff；
显示：块；
文字装饰：无；
填充：.2rem；
背景色：#888；
边框顶部：0px实心#fff；/*定义上边框的颜色*/
边框底部：3px实心#666；
边界半径：2px；
}
.按钮链接：悬停{
框阴影：插入0 0 100px 100px rgba（255，255，255，0.1）；/*灯光覆盖*/
}
.按钮链接：活动{
边框顶部宽度：2px；/*添加此项，使其“向下推”*/
边框底宽：1px；
}
根据我的说法，这件看起来很可爱：）

。按钮{
颜色：rgba（255，255，255，1）；
背景色：rgba（61,51,119,1）；
字号：500；
填充：9px；
盒影：0px 5px 0px rgba（31,36,78,1），0px 9px 12px rgba（0,0,0,7）；
宽度：160px；
文本对齐：居中；
过渡：全部。3秒轻松；
字体大小：15px；
边界：无；
边界半径：5px；
大纲：无；
保证金：自动；
字体系列：“世纪哥特式”；
变换：比例（0.9）；
}
.按钮：激活{
盒影：0px2px0pxrgba（31,36,78,1），0px2px4prgba（0,0,0,9）；
顶部：6px；
变换：缩放（0.9）平移（3px）；
}
您希望按钮看起来像什么？HTML中有一个不需要图像的
标记。我猜你的Google版本不起作用。我的回复了很多链接：只要稍加修改，这可以很好地满足我的需求，谢谢 
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>

<!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>

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

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