Is it possible to make this particular button effect in pure CSS? - css

Question

I'm designing a site for a school project, and I'm trying to design a particular style for the buttons and navigation, but I'm not sure how to go about this.
I considered doing a border effect, but I stopped short as I realized that it doesn't just involve changing individual side's colors but cutting two sides in half and coloring those pieces differently. A gradient on a div behind it might work, but not only would that get complicated, but it would look blurry while I'm going for sharpness like an edge on a 3D shape. Is this doable, or would I have to use images?
EDIT: Wow, looks like there's a lot of methods out there. Code Golf, anyone?

Answer 1

A solution without css gradient if you want to support IE8 too: http://jsfiddle.net/2am780pq/
HTML:
<a class="button">Cool</a>
CSS:
.button {
display: inline-block;
position: relative;
background-color: #4755e7;
padding: 10px 20px;
color: #fff;
}
.button:before {
content: '';
position: absolute;
top: 50%;
bottom: -5px;
left: -5px;
right: -5px;
margin: auto;
background-color: #4451dc;
z-index: -1;
}
.button:after {
content: '';
position: absolute;
top: -5px;
bottom: 50%;
left: -5px;
right: -5px;
margin: auto;
background-color: #5d67e9;
z-index: -1;
}

Answer 2

without gradient nor pseudo-elemts, box-shadow could do the job too:
http://codepen.io/anon/pen/NPaZBd
a{
display: inline-block;
color: #FFF;
padding:5px 1em;
line-height:2em;
background:#4755E7;
margin:1em;
box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
0.8em -0.8em 0 -0.5em #5d67e9,
-0.8em 0.8em 0 -0.5em #4451dc,
0.8em 0.8em 0 -0.5em #4451dc;
}
/* add an inside blurry border too ? */
a:nth-child(even) {
box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
0.8em -0.8em 0 -0.5em #5d67e9,
-0.8em 0.8em 0 -0.5em #4451dc,
0.8em 0.8em 0 -0.5em #4451dc,
inset 0 0 1px
}
link
link link
link bigger link
link even bigger works still

Answer 3

Yes, with gradient backgrounds and nested elements. This is NOT cross-browser compatible in browsers that do not support CSS3.
Live example: JSFiddle
The HTML:
<span>Click Me</span>
The CSS:
.button {
display: inline-block;
padding: 4px;
background: rgba(115,127,255,1);
background: -moz-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,127,255,1)), color-stop(50%, rgba(68,81,220,1)), color-stop(51%, rgba(68,81,220,1)), color-stop(100%, rgba(68,81,220,1)));
background: -webkit-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -o-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -ms-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: linear-gradient(to bottom, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
}
.button span {
display: inline-block;
background: #4755E7;
color: #fff;
padding: 0.5em 0.75em;
}

Answer 4

Here one element solution, simplier markup :D
<b>Im sexy and i know it!</b>
http://jsfiddle.net/ebdq20vm/1/
b {
padding: 20px;
display: inline-block;
color: #FFF;
background: #5d67e9;
background: -moz-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5d67e9), color-stop(51%, #4451dc));
background: -webkit-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -o-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -ms-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: linear-gradient(to bottom, #5d67e9 50%, #4451dc 51%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d67e9', endColorstr='#4451dc', GradientType=0);
position: relative;
z-index: 5;
}
b:before {
content:'';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background-color: #4755E7;
display: block;
z-index: -1;
}