Как сделать изогнутую тень на чистом CSS3.
Всем привет! Сегодня мы рассмотрим, как сделать изогнутую тень для кнопки на чистом CSS3.
HTML разметка:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Изогнутая тень на CSS3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" class="button">Войти</a>
<button href="#" class="button">Войти</button>
</body>
</html>
CSS код:
body {
font-family: "Helvetica", sans-serif;
font-size: 1rem;
}
button, .button {
display: inline-block;
position: relative;
border-width: 0;
cursor: pointer;
line-height: normal;
margin: 0 0 10px;
text-decoration: none;
text-align: center;
padding: 15px 25px;
font-size: 1rem;
background-color: #009eff;
vertical-align: middle;
color: #fff;
border-radius: 5px;
}
button:after, .button:after {
position: absolute;
content: ' ';
top: 0;
right: 0;
left: 0;
bottom: 0;
border-radius: 5px;
}
button:hover:after {
box-shadow: inset 0 -3px rgba(0, 0, 0, .25);
}
Вот так просто можно сделать довольно красивый эффект. Т.к. здесь используется абсолютно все, что вы уже должны знать, то пояснять нечего. Если же вы чувствуете, что чего-то не понимаете, то советую приобрести курс "HTML5 и CSS3 с Нуля до Гуру".
Спасибо за внимание!
-
Создано 18.08.2015 19:00:00
-
Михаил Русаков
Комментарии (4):
Такой же самый эффект кнопки можно сделать просто задав ей 2 css-свойства. Например: border-radius: 5px; и border-bottom: 2px solid red;
Ответить
Если Вы в этом уверены, то приведите, пожалуйста, код на http://jsfiddle.net/
Ответить
Круто!
Ответить
Спасибо
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.