I have a multiple set of buttons which are clicked to show that they are selected.I have already successfully achieved that.But the problem is the buttons rise again after mouse up.

I need the buttons to stay pressed after the mouse leaves them.

Screenshot :

Code :

.button {
  position: absolute;
  top: 100px;
  left: 200px;
  display: inline-block;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
  /* gradient effects */
  0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
  /* shadow */
  -webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
  background-color: #E8E8E8;
  background-image:
  /* gloss gradient */
  -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
  /* dark outside gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
  /* light inner gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
  /* diagonal line pattern */
  -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
  -webkit-box-shadow: 0px -1px #fff,
  /* top highlight */
  0px 1px 1px #FFFFFF;
  /* bottom edge */
  -webkit-background-size: 100%, 100%, 100%, 4px 4px;
  -webkit-border-radius: 10px;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  display: inline-block;
  padding: 10px 40px 10px 40px;
  color: #3A474D;
  text-transform: uppercase;
  font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
  font-weight: 700;
  font-size: 32px;
  text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
  color: #AEBF3B;
  text-shadow: 0px -1px #97A63A;
  cursor: pointer;
}
.button:active {
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
  /* shadow */
}
.button:active span {
  -webkit-transform: translate(0, 5px);
  /* depth of button press */
}
.button span:after {
  content: ">";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 14px;
  top: 12px;
  font-family: 'Cabin';
  font-weight: 700;
  color: #AEBF3B;
  text-shadow: 0px 1px #fff, 0px -1px #97A63A;
  font-size: 26px;
}

<link href=":400,500,600,bold" rel="stylesheet" type="text/css">
<link href="+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">

<a class="button">
  <span>select me </span>
</a>

I have a multiple set of buttons which are clicked to show that they are selected.I have already successfully achieved that.But the problem is the buttons rise again after mouse up.

I need the buttons to stay pressed after the mouse leaves them.

Screenshot :

Code :

.button {
  position: absolute;
  top: 100px;
  left: 200px;
  display: inline-block;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
  /* gradient effects */
  0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
  /* shadow */
  -webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
  background-color: #E8E8E8;
  background-image:
  /* gloss gradient */
  -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
  /* dark outside gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
  /* light inner gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
  /* diagonal line pattern */
  -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
  -webkit-box-shadow: 0px -1px #fff,
  /* top highlight */
  0px 1px 1px #FFFFFF;
  /* bottom edge */
  -webkit-background-size: 100%, 100%, 100%, 4px 4px;
  -webkit-border-radius: 10px;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  display: inline-block;
  padding: 10px 40px 10px 40px;
  color: #3A474D;
  text-transform: uppercase;
  font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
  font-weight: 700;
  font-size: 32px;
  text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
  color: #AEBF3B;
  text-shadow: 0px -1px #97A63A;
  cursor: pointer;
}
.button:active {
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
  /* shadow */
}
.button:active span {
  -webkit-transform: translate(0, 5px);
  /* depth of button press */
}
.button span:after {
  content: ">";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 14px;
  top: 12px;
  font-family: 'Cabin';
  font-weight: 700;
  color: #AEBF3B;
  text-shadow: 0px 1px #fff, 0px -1px #97A63A;
  font-size: 26px;
}

<link href="http://fonts.googleapis./css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis./css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">

<a class="button">
  <span>select me </span>
</a>

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked May 30, 2015 at 10:22 Tharif 14k10 gold badges57 silver badges78 bronze badges

is using javascript/jquery fine? – AmmarCSE Commented May 30, 2015 at 10:26
see my updated answer which toggles active using purely javascript – AmmarCSE Commented May 30, 2015 at 11:03

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You can find the full code below for a version based on jQuery, one based on vanilla JS and one using only HTML & CSS to achieve the desired effect.

You can also play around with the code at the following Fiddles:

jQuery version
JS version without jQuery
HTML/CSS only version

jQuery version :

HTML :

<link href="http://fonts.googleapis./css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis./css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">

<a class="button">
  <span>select me </span>
</a>

CSS :

   .button {
  position: absolute;
  top: 100px;
  left: 200px;
  display: inline-block;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
  /* gradient effects */
  0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
  /* shadow */
  -webkit-transition: -webkit-box-shadow .1s ease-in-out;
}

.button span {
  background-color: #E8E8E8;
  background-image:
  /* gloss gradient */
  -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
  /* dark outside gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
  /* light inner gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
  /* diagonal line pattern */
  -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
  -webkit-box-shadow: 0px -1px #fff,
  /* top highlight */
  0px 1px 1px #FFFFFF;
  /* bottom edge */
  -webkit-background-size: 100%, 100%, 100%, 4px 4px;
  -webkit-border-radius: 10px;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  display: inline-block;
  padding: 10px 40px 10px 40px;
  color: #3A474D;
  text-transform: uppercase;
  font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
  font-weight: 700;
  font-size: 32px;
  text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.button span:hover {
  color: #AEBF3B;
  text-shadow: 0px -1px #97A63A;
  cursor: pointer;
}

.button.pressed {
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
  /* shadow */
}

.button.pressed span {
  -webkit-transform: translate(0, 5px);
  /* depth of button press */
}

.button span:after {
  content: ">";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 14px;
  top: 12px;
  font-family: 'Cabin';
  font-weight: 700;
  color: #AEBF3B;
  text-shadow: 0px 1px #fff, 0px -1px #97A63A;
  font-size: 26px;
}

JS :

$('.button').click(function(){
    $(this).toggleClass('pressed');
});

JS version without jQuery :

HTML :

<link href="http://fonts.googleapis./css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis./css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">

<a class="button">
  <span>select me </span>
</a>

CSS :

 .button {
  position: absolute;
  top: 100px;
  left: 200px;
  display: inline-block;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
  /* gradient effects */
  0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
  /* shadow */
  -webkit-transition: -webkit-box-shadow .1s ease-in-out;
}

.button span {
  background-color: #E8E8E8;
  background-image:
  /* gloss gradient */
  -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
  /* dark outside gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
  /* light inner gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
  /* diagonal line pattern */
  -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
  -webkit-box-shadow: 0px -1px #fff,
  /* top highlight */
  0px 1px 1px #FFFFFF;
  /* bottom edge */
  -webkit-background-size: 100%, 100%, 100%, 4px 4px;
  -webkit-border-radius: 10px;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  display: inline-block;
  padding: 10px 40px 10px 40px;
  color: #3A474D;
  text-transform: uppercase;
  font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
  font-weight: 700;
  font-size: 32px;
  text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.button span:hover {
  color: #AEBF3B;
  text-shadow: 0px -1px #97A63A;
  cursor: pointer;
}

.button.pressed {
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
  /* shadow */
}

.button.pressed span {
  -webkit-transform: translate(0, 5px);
  /* depth of button press */
}

.button span:after {
  content: ">";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 14px;
  top: 12px;
  font-family: 'Cabin';
  font-weight: 700;
  color: #AEBF3B;
  text-shadow: 0px 1px #fff, 0px -1px #97A63A;
  font-size: 26px;
}

JS :

var buttons = document.getElementsByClassName("button");
[].forEach.call(buttons, function(button) {
    button.addEventListener("click", function(e) {
        this.classList.toggle('pressed');        
    });
});

HTML/CSS only version :

HTML :

<link href="http://fonts.googleapis./css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis./css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">

<button class="button">
<input type="checkbox" id="selectme" />
<span>
  <label for="selectme">select me </label>
</span>
</button>

CSS :

.button {
  margin-left: -5000px;
}

.button span {
  position: absolute;
  top: 100px;
  left: 200px;
  display: inline-block;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
  /* gradient effects */
  0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
  /* shadow */
  -webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button label {
  background-color: #E8E8E8;
  background-image:
  /* gloss gradient */
  -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
  /* dark outside gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
  /* light inner gradient */
  -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
  /* diagonal line pattern */
  -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
  -webkit-box-shadow: 0px -1px #fff,
  /* top highlight */
  0px 1px 1px #FFFFFF;
  /* bottom edge */
  -webkit-background-size: 100%, 100%, 100%, 4px 4px;
  -webkit-border-radius: 10px;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  display: inline-block;
  padding: 10px 40px 10px 40px;
  color: #3A474D;
  text-transform: uppercase;
  font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
  font-weight: 700;
  font-size: 32px;
  text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button label:hover {
  color: #AEBF3B;
  text-shadow: 0px -1px #97A63A;
  cursor: pointer;
}

.button input:checked + span {
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
  /* shadow */
}

.button input:checked + span label {
  -webkit-transform: translate(0, 5px);
  /* depth of button press */
}

.button label:after {
  content: ">";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 14px;
  top: 12px;
  font-family: 'Cabin';
  font-weight: 700;
  color: #AEBF3B;
  text-shadow: 0px 1px #fff, 0px -1px #97A63A;
  font-size: 26px;
}

JS :

/* CSS only means that no JS code is required at all! */

You can achieve it without JavaScript. Try :checked pseudo class and adjacent sibling selector (+):

label {
  width: 120px;
  height: 40px;
  background: #d00;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  color: white;
}
#checkbox {
  display: none;
}
#checkbox:checked + label {
  background: #600;
}

<input type="checkbox" id="checkbox">
<label for="checkbox">select me </label>

I also did a little change to your fiddle

You can also make nice look single selection:

label {
  width: 120px;
  height: 40px;
  background: #d00;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  color: white;
}
input {
  display: none;
}
input:checked + label {
  background: #600;
}

<input type="radio" name="group" id="option1">
<label for="option1">select 1</label>
<input type="radio" name="group" id="option2">
<label for="option2">select 2</label>
<input type="radio" name="group" id="option3">
<label for="option3">select 3</label>
<input type="radio" name="group" id="option4">
<label for="option4">select 4</label>

First, decorate your css styles that use :active attribute with an alias class like

.button:active, .button-active{
...
}

.button:active span, .button-active span{
...
}

then make a onclick event handler which manually toggles the class

function toggleActive(element){
   element.classList.toggle('button-active');
}

function toggleActive(element){
   element.classList.toggle('button-active');
}

body {
    background: #A7A9AC;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(.34, rgba(230,237,241,.05)),
        color-stop(.67, rgba(230,237,241,0)));
    -webkit-background-size: 5px 5px;
}

#pagegradient {
  background-image:
        -webkit-gradient(
            radial, 
            50% -50, 
            300, 
            50% 0, 
            0, 
            from(rgba(230, 237, 241, 0)), 
            to(rgba(230, 237, 241, 0.8)));
    
  height:100%;
  left:0px;
  position:absolute;
  top:0;
  width: 600px;
}

.button {
    position: absolute;
    top: 100px;
    left: 200px;
    display: inline-block;
    margin: 0 auto;
    
    -webkit-border-radius: 10px;
    
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
    background-color: #E8E8E8;
    
    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),        
        
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#D2D2D1), 
            color-stop(60%,#D2D2D1), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
    
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    
    display: inline-block;
    padding: 10px 40px 10px 40px;
    
    color: #3A474D;
    text-transform: uppercase;
    font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
    font-weight: 700;
    font-size: 32px;
    
    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

        .button span:hover {
            color: #AEBF3B;
            text-shadow: 0px -1px #97A63A;
            cursor: pointer;
        }

        .button:active, .button-active{
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }

        .button:active span, .button-active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }

    .button span:after {
        content: ">";
        display: block;
        width: 10px;
        height: 10px;
    
        position: absolute;
        right: 14px;
        top: 12px;    
        
        font-family: 'Cabin';
        font-weight: 700;
        color: #AEBF3B;
        text-shadow: 0px 1px #fff, 0px -1px #97A63A;
        font-size: 26px;
    }

<link  href="http://fonts.googleapis./css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >

<link  href="http://fonts.googleapis./css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >

<div id="pagegradient"></div>

    <a class="button" onclick="toggleActive(this)">
        <span>select me </span>
           </a>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to make buttons sunken after being clicked? - Stack Overflow

Screenshot :

Code :

Screenshot :

Code :

3 Answers 3

jQuery version :

JS version without jQuery :

HTML/CSS only version :

与本文相关的文章

评论列表(0)