Criei o exemplo abaixo com os 3 tipos de formato de botão mais usados e montei num style único, mas nomeei de forma a você poder facilmente reeditar e customizar. Nele coloquei os elementos mais procurados por web designers e programadores: link sem sublinhado, cursor sobre o botão, efeito hover, efeito push e link em botão css puro.
<style>
.button.curvo {
display: inline-block;
position:relative;
height:40px;
width:150px;
text-align:center;
border-radius:5px;
box-shadow:inset 0 -2px 0 0 #ccc;
text-decoration:none;
border: none;
outline: none;
}
.button.reto {
display: inline-block;
position:relative;
height:40px;
width:150px;
text-align:left;
border-radius:0px;
box-shadow:inset 0 -2px 0 0 #ccc;
text-decoration:none;
border: none;
outline: none;
}
.button.redondo {
display: inline-block;
position:relative;
height:40px;
text-align:right;
width:150px;
border-radius:60px;
box-shadow:inset 0 -2px 0 0 #ccc;
text-decoration:none;
border: none;
outline: none;
}
.reto {
background-color: #999;
}
.curvo {
background-color: #000;
}
.redondo {
background-color: #ff0000;
}
.button-text {
font-family:"Helvetica", Arial;
opacity:1.0;
font-size:15px;
font-weight:400;
text-decoration:none;
border:none;
color:#fff;
padding-left: 7px;
padding-right: 7px;
line-height:35px;
}
.button:hover {
opacity: 0.7;
border: none;
outline: none;
}
.button:active {
opacity: 1.0;
height:32px;
top: 2px;
margin-bottom: 14px;
border: none;
outline: none;
box-shadow: none;
}
</style>
<a href="#" target="" class="button reto"><span class="button-text">BOTÃO RETO</span></a>
<a href="#" target="" class="button curvo"><span class="button-text">BOTÃO CURVO</span></a>
<a href="#" target="" class="button redondo"><span class="button-text">BOTÃO REDONDO</span></a>
DICA
Você pode customizar cada botão, alterando os parâmetros de cada um bastando observar o bloco de código referente ao nome, exemplo: reto, curvo ou redondo. Para alterar volume de curva nos cantos do botão basta mudar o valor do item border-radius: para mais ou para menos. Você pode usar de outras formas inclusive adicionando ou retirando botões.
Objetivo do Web Scriptum
Criei este blog como repositório de scripts e códigos que criei ao longo de anos de trabalho e que continuo criando. Muitos me ajudaram, esta é minha hora de ajudar.
