Домой / Рецепты CSS / Кнопки / 3D кнопки в css
3D кнопки в css

3D кнопки в css

Пример создания эффекта 3D кнопок в css. 3D кнопки реализованы с помощью достаточно простого css свойства text-shadow.

Демо

HTML

<body>
 <div id="container">

 <div class="button-main">
 <div class="button-inside">
 <h1>A</h1>
 </div>
 </div>

 <div class="button-main">
 <div class="button-inside">
 <h1>B</h1>
 </div>
 </div>

 <div class="button-main">
 <div class="button-inside">
 <h1>C</h1>
 </div>
 </div>

 </div>
</body>

CSS

body {
 margin: 0;
 background-color: #404040;
}

#container {
 width: 35em;
 margin: 3em auto;
}

.button-main {
 width: 5em;
 height: 5em;
 background-color: #999;
 background-image: linear-gradient(180deg, #CCC, #999);
 border-top: 3px solid #CCC;
 border-right: 3px solid #CCC;
 border-left: 4px solid #666;
 border-bottom: 4px solid #666;
 border-radius: 1em;
 float: left;
 margin: 3em;
 text-decoration: none;
 box-shadow: -.1em .1em 0 #000,
 -.2em .2em 0 #000,
 -.3em .3em 0 #000,
 -.4em .4em 0 #333,
 -.5em .5em 0 #333,
 -.6em .6em 0 #333,
 -.7em .7em 0 #333,
 -.9em .9em 0 #333,
 -1em 1em 0 #333,
 -1.1em 1.1em 0 #333,
 -1.2em 1.2em 0 #333;
 transition: box-shadow 0.3s,
 border-top 0.3s,
 border-right 0.3s;
}

.button-main:hover, .button-main:focus {
 box-shadow: .1em -.1em 0 #333,
 .2em -.2em 0 #333,
 -.1em .1em 0 #333,
 -.2em .2em 0 #333,
 -.3em .3em 0 #333,
 inset -.1em -.1em 2em #FFF,
 -.1em -.1em 2em #666;
 border-top: 3px solid #666;
 border-right: 3px solid #666;
}

.button-inside {
 width: 4em;
 height: 4em;
 margin: .5em auto;
 border-radius: .8em;
 background-color: #CCC;
 background-image: linear-gradient(45deg, #CCC, #999);
 box-shadow: inset -.15em .15em 0 #666,
 inset .1em -.1em 0 #CCC;
}

h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 3em;
 color: #F2F2F2;
 text-align: center;
 line-height: 1.3em;
 margin: 0 auto;
 text-shadow: -.01em .01em 0 #666,
 -.02em .02em 0 #666,
 -.03em .03em 0 #666,
 -.04em .04em 0 #666,
 -.05em .05em 0 #666,
 -.06em .06em 0 #999,
 -.07em .07em 0 #999,
 -.08em .08em 0 #999,
 -.09em .09em 0 #999,
 -.1em .1em 0 #999,
 -.11em .11em 0 #999;
}

Пример создания эффекта 3D кнопок в css. 3D кнопки реализованы с помощью достаточно простого css свойства text-shadow. HTML CSS body { margin: 0; background-color: #404040; } #container { width: 35em; margin: 3em auto; } .button-main { width: 5em; height: 5em; background-color: #999; background-image: linear-gradient(180deg, #CCC, #999); border-top: 3px solid #CCC; border-right: 3px solid #CCC; border-left: 4px solid #666; border-bottom: 4px solid #666; border-radius: 1em; float: left; margin: 3em; text-decoration: none; box-shadow: -.1em .1em&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 1 голосов )
85

Оставить комментарий

Ваш email не будет опубликован.

*