Скошенная кнопка — css
Как сделать скошенную кнопку с помощью css легко и просто без использования картинок? Оказывается - очень просто. Давайте разберемся с этим.
Для начала создадим простую html структуру нашей кнопки:
<div class="button-container"> <a href="/" class="button">Нажми меня</a> </div>
Теперь зададим базовые стили оформления:
.button-container { text-align:center; margin:300px; } .button { display:inline-block; vertical-align:top; padding:0 25px; height:60px; color:#fff; text-decoration:none; font-family:Arial, sans-serif; font-size:14px; line-height:60px; font-weight:bold; letter-spacing:0.05em; text-transform:uppercase; background:#00B98B; text-align:center; position:relative; } .button:hover { opacity:0.8; }
После этого наша кнопка будет выглядеть вот так:
Давайте теперь разберемся как сделать скошенные края? Для этого будем использовать псевдоэлементы before и after. Вот стили для них:
.button:before { content:''; display:block; clear:both; width:0; height:0; border-left:30px solid transparent; border-bottom:60px solid #00B98B; position:absolute; top:0; left:-30px; } .button:after { content:''; display:block; clear:both; width:0; height:0; border-right:30px solid transparent; border-top:60px solid #00B98B; position:absolute; top:0; right:-30px; }
Вот и все. Полный код страницы для наглядности:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Как сделать скошенную кнопку - css</title> </head> <style> .button-container { text-align:center; margin:300px; } .button { display:inline-block; vertical-align:top; padding:0 25px; height:60px; color:#fff; text-decoration:none; font-family:Arial, sans-serif; font-size:14px; line-height:60px; font-weight:bold; letter-spacing:0.05em; text-transform:uppercase; background:#00B98B; text-align:center; position:relative; } .button:hover { opacity:0.8; } .button:before { content:''; display:block; clear:both; width:0; height:0; border-left:30px solid transparent; border-bottom:60px solid #00B98B; position:absolute; top:0; left:-30px; } .button:after { content:''; display:block; clear:both; width:0; height:0; border-right:30px solid transparent; border-top:60px solid #00B98B; position:absolute; top:0; right:-30px; } </style> <body> <div class="button-container"> <a href="/" class="button">Нажми меня</a> </div> </body> </html>