Создание кнопки средствами CSS

@aekuznecov · Регистрация: 25.03.2013

Author24 — интернет-сервис помощи студентам

Всем привет. Пытаюсь понять как сделать кнопку через CSS. Сами параметры такие: Высота - 45px, Ширина - 110px, Тип оформления - овальная. При нажатии на кнопку должен появляться эффект нажатия(вдавливания, не знаю как правильно объяснить) и потом переход на ссылку внутри кнопки.

Подозреваю, что должно быть так:

HTML5

1
2
3

<ul>
    <li><a class="button" href="linkToHTMLFile">text</a></li>
</ul>

а вот как сделать саму кнопку - так и не понял

@chomovva · 16.08.2015, 11:20

aekuznecov, к примеру так:

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>Задачи htmlbook.ru</title>
        <meta charset="utf-8">
        <style>
            .button:link,
            .button:visited {
                display: block; /*или инлайн блок*/
                width: 108px;
                height: 43px;
                border-radius: 43px;
                text-align: center;
                font-weight: bold;
                line-height: 45px;
                background-image: linear-gradient(to top, #2D882D, #00ECEC);
                color: #ffffff;
                text-shadow: 1px 1px 0px #262626;
                text-decoration: none;
                border: 1px solid #226666;
                box-shadow: 0px 0px 3px #262626;
            }
            .button:active {
                box-shadow: inset 0px 0px 10px #262626;
                background-image: linear-gradient(to top, #2D882D, #00ECEC) !important;
            }
            .button:hover {
                background-image: linear-gradient(to top, #00F500, #00ECEC);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <a class="button" href="#">text</a>
            </li>
        </ul>
    </body>
</html>

эффект нажатия делается с помощью псевдокласcа :active, для оформления самого нажатия есть множество вариантов, это и тени, рамки, фоны, положение ...

@paskalnikita · 16.08.2015, 12:07

У меня например так реализованно, только размеры сделайте немного другие:

HTML5

<style>
a.top-button {
    font-weight: 700;
    color: white;
    text-decoration: none;
    padding: .8em 1em calc(.8em + 3px);
    border-radius: 3px;
    background: rgb(64,199,129);
    box-shadow: 0 -3px rgb(53,167,110) inset;
}
a.top-button:hover { background: rgb(53, 167, 110); }
a.top-button:active {
    background: rgb(33,147,90);
    box-shadow: 0 3px rgb(33,147,90) inset;
}
</style>
<a class="top-button" href="/contact">Contact us</a>

@whiteapps · 16.08.2015, 13:21

aekuznecov,

HTML5

1	<a class="btn">button</a>

CSS

.btn {
    border: 1px solid #333;
    outline: none;
    border-radius: 50%;
    background: none #fff;
    width: 110px;
    height: 45px;
    text-align: center;
    display: inline-block;
    line-height: 45px;
    cursor: pointer;
    border-bottom: 3px solid #333;
    position: relative;
    top: 0px;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out;
}
 
.btn:active {
    border-bottom: 1px solid #333;
    position: relative;
    top: 3px;
    -webkit-transition: .1s ease-out;
    -moz-transition: .1s ease-out;
    -o-transition: .1s ease-out;
    transition: .1s ease-out;
}

https://jsfiddle.net/fnutb160/

	16.08.2015, 13:21