CODEWITHSUNDEEP
csshtml
Vector Lightning
Vector Lightning

Reputation: 331

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

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.

enter image description here

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?

Upvotes: 2

Views: 99

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105883

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
}
<a href="#"> link</a>
<a href="#"> link link</a>
<a href="#"> link bigger link</a>
<a href="#"> link even bigger works still</a>

Upvotes: 2

Alerosa
Alerosa

Reputation: 698

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;
}

Upvotes: 2

KeySee
KeySee

Reputation: 780

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;
}

Upvotes: 1

Patrick Moore
Patrick Moore

Reputation: 13344

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:

<a href="#" class="button"><span>Click Me</span></a>

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;
}

Upvotes: 1

Related Questions