一个看起来像使用CSS按钮的标签 [英] a tag that looks like a button using CSS

问题描述

我制作了以下CSS类：

I made the following CSS class:

.mine-button { 
    outline: 0;
    background-color:rgb(153,153,153);
    margin: 0 4px 100px 0;
    padding: 0 1em;
    color:rgb(255,255,0);
    height: 2em;
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative;
    text-align: center;
    vertical-align:middle;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    float:right;
}

然后我将以下内容添加到HTML文件中：

Then I added the following to the HTML file:

<a class='mine-button'>Read more</a>

但这是我得到的：






有2个问题：

1。 读我不是在按钮的中间垂直对齐

2。 button在文本的黄色边框上，但上面类中的边距底部设置为100px！

but this is what I get:



There's 2 problems:
1. The "Read me" is not aligned vertically in the middle of the "button"
2. The "button" is over the yellow border of the text although the margin-bottom in the class above is set to 100px !

推荐答案

您正在使用 height：2em ，我添加了 padding-top：0.3em ，并将高度降低到 height：1.7em ，它使文本居中。

You are using height: 2em, I added padding-top: 0.3em and decrease the height to height: 1.7em and it makes the text in centre.

以下是小提琴。

添加 margin-bottom：10px 将其移动到黄线。

这篇关于一个看起来像使用CSS按钮的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！