Всем привет! Сегодня рассмотрим, как сделать изогнутую тень для кнопки на чистом 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);
}
Спасибо за внимание!
