Slightly variation of http://tympanus.net/Tutorials/CSSButtonsPseudoElements/index4.html
A Pen by Peter Broschwitz on CodePen.
<div id="container_buttons"> | |
<p> | |
<a class="a_demo_four" href="#"> | |
Click me! | |
</a> | |
</p> | |
<p> | |
<a href="#" class="a_demo_four"> | |
Come on, don't be afraid | |
</a> | |
</p> | |
<p> | |
<a href="#" class="a_demo_four"> | |
You can make this as wide as you want ;) | |
</a> | |
</p> | |
</div> |
#container_buttons{ | |
width: 400px; | |
margin: 0 auto; | |
background: rgba(255,255,255,0.3); | |
padding: 60px 60px 30px; | |
border-radius: 20px; | |
box-shadow: 1px 1px 1px rgba(0,0,0,0.09) inset; | |
} | |
#container_buttons p{ | |
display:block; | |
padding-bottom:60px; | |
} | |
.a_demo_four { | |
display: inline-block; | |
width: 130px; | |
text-align: center; | |
background-color:#3bb3e0; | |
font-family: 'Open Sans', sans-serif; | |
font-size:12px; | |
text-decoration:none; | |
color:#fff; | |
position:relative; | |
padding:10px 20px; | |
padding-left: 50px; | |
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); | |
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); | |
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); | |
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); | |
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); | |
background-image: -webkit-gradient( | |
linear, | |
left bottom, | |
left top, | |
color-stop(0, rgb(44,160,202)), | |
color-stop(1, rgb(62,184,229)) | |
); | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
-o-border-radius: 5px; | |
border-radius: 5px; | |
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; | |
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; | |
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; | |
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; | |
} | |
.a_demo_four:active { | |
top:3px; | |
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); | |
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); | |
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); | |
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); | |
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); | |
background-image: -webkit-gradient( | |
linear, | |
left bottom, | |
left top, | |
color-stop(0, rgb(62,184,229)), | |
color-stop(1, rgb(44,160,202)) | |
); | |
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; | |
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; | |
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; | |
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; | |
} | |
.a_demo_four::before { | |
background-color:#2591b4; | |
background-image:url(http://tympanus.net/Tutorials/CSSButtonsPseudoElements/images/right_arrow.png); | |
background-repeat:no-repeat; | |
background-position:center center; | |
content:""; | |
width:20px; | |
height:20px; | |
position:absolute; | |
left: 15px; | |
top:50%; | |
transform: rotate(180deg); | |
margin-top:-9px; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
-o-border-radius: 50%; | |
border-radius: 50%; | |
-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; | |
-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; | |
-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; | |
box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; | |
} | |
.a_demo_four:active::before { | |
top:50%; | |
margin-top:-12px; | |
-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; | |
-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; | |
-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; | |
box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; | |
} |