Пример создания эффекта 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; }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!