css样式按钮好看样式_CSS样式链接到时尚的按钮

css样式按钮好看样式

Links are used for interlinking related webpages. In HTML <a href="URL"...&gt </a> Anchor tag is used to create hyperlinks. We have already learned how to style a link, based on its state, namely, hover, link, visited and active.

链接用于链接相关网页。 在HTML中， <a href="URL"...&gt </a>锚标记用于创建超链接。 我们已经学习了如何根据链接的状态(即悬停 ， 链接 ， 访问和活动)来设置链接的样式。

In this tutorial, we will learn how to make the links look like rectangular buttons, just like we see Submit buttons in forms, Next and Previous button at the end of this tutorial, the Live Example hyperlink etc.

在本教程中，我们将学习如何使链接看起来像矩形按钮，就像我们看到表单中的“提交”按钮，本教程结尾处的“下一个”和“上一个”按钮，“实时示例”超链接等一样。

If we have two style classes, with different styling rules, we can add both of them together to a single tag. Here is the clickme class,

如果我们有两个具有不同样式规则的样式类，则可以将它们一起添加到单个标签中。 这是clickme类，

CSS:

CSS：

.clickme {
    background-color: #EEEEEE;
    padding: 8px 20px;
    text-decoration:none;
    font-weight:bold;
    border-radius:5px;
    cursor:pointer;
}

Output:

输出：

clickme is a styling class which provides some basic styling to a link, like padding, removing the underline etc, to make it look like a simple plain old button. But yes, the main task of converting the link into a button is accomplished.

clickme是一个样式类，它为链接提供一些基本样式，例如填充，删除下划线等，以使其看起来像一个简单的普通旧按钮。 但是可以，将链接转换为按钮的主要任务已完成。

Live Example →

现场示例→

Now we will add more styling classes on top of the clickme base class, to make colorful buttons.

现在，我们将在clickme基类之上添加更多样式类，以创建彩色按钮。

Red button → .danger class

红色按钮→ .danger等级

.danger {
    background-color:#FF0040;
    color: #FFFFFF;
}

.danger:hover {
    background-color:#EB003B;
    color: #FFFFFF;
}

HTML:

HTML：

<div>
    <a href="http://www.studytonight.com/tests"class="clickme danger">Tests</a>
</div&g

Output:

输出：

Go see the combined code live in the Web Playground and even try changing a few css properties.

可以在Web Playground中实时查看组合的代码，甚至尝试更改一些CSS属性。

Live Example →

现场示例→

大结局！ 完整CSS时尚按钮集 (Finale! The complete CSS Stylish Button set)

In this button set, we have added 5 uinque colors, using 5 different css style classes, namely danger, success, warning, info, default.

在此按钮集中，我们使用5种不同CSS样式类添加了5种uinque颜色，即danger ， success ， warning ， info ， default 。

You can change the colors as per your website theme, or you can even add more color classes to this. Now go to the Web Playground to see the complete code in action.

您可以根据网站主题更改颜色，甚至可以为此添加更多颜色类别。 现在转到Web Playground ，查看完整的代码。

Output:

输出：

Live Example →

现场示例→

We hope you enjoyed this exercise. And do practise on our live Web playground (Link) and share your style projects with us by taking a snaphot of the output, on our Facebook page. Yeah!

希望您喜欢这个练习。 并在我们的实时网络游乐场( Link )上练习，并通过在Facebook页面上获取输出快照与我们分享您的风格项目。 是的

翻译自: https://www.studytonight.com/cascading-style-sheet/styling-link-into-nice-button

css样式按钮好看样式