CSS Button - Lima #1

CSS Button - Lima #1

Boas, hoje irei fornecer um botão feito completamente em CSS com um fundo de uma imagem, pode ser útil para o vosso blog, para colocarem onde quiserem. É um CSS botão com vários efeitos, podem ver como ele funciona colocando o rato em cima do botão criado em CSS:

Lima

Aqui está o código CSS:

.pacman { color: black; border: 1px solid #E1E1E1; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRovu52aSruC0MMts9vfhlYKTG4f38JH0Dfs7xEld93RT5ay5fS"); text-decoration: none; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 10px; font-weight: bold; font-size: 40px; position: relative; float: left; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; text-shadow: 0px 4px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: 1s ease-in-out; font-family: "Brush Script MT", cursive; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-filter: grayscale(100%); } .pacman:hover { -webkit-filter: grayscale(0%); text-shadow: 4px -5px 6px white, 2px -4px 10px yellow, 0px -13px 20px #ff8000, 0px -18px 40px black; text-shadow: -3px -0px 10px #000, 1px 1px 1px #000; color: #FF8900; padding-top: 15px; padding: 12px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }

Aqui está o código HTML:

<div class="pacman"> Lima</div>

E este é o primeiro CSS Button muitos outros virão! Espero que gostem :)