CSS bug on a button

[wilfriedMarseille]

Hello
On my footer in my newsletter button “je m’abonne” When i click on my button it move at the top.
I try to copy/past with :active and :focus But is not working … Can you help me again please ?This is my css code
`

/*****************   NEWS LETTERS   ******************/

/*LabelMailChimp Recevez nos meilleurs ….*/

.mailchimplab{

    font–size: 23.6px;

    max–width: 3000px;

}

/*Bouton s’abonner*/

.abonnement {

  –webkit–box–sizing: content–box;

  –moz–box–sizing: content–box;

  box–sizing: content–box;

  position: relative;

  cursor: pointer;

  padding: 0 25px 0 20px;

  font: normal 21.3px/2.4 “Open Sans”, Helvetica, sans–serif;

  color: #407F7F;

  text–transform: uppercase;

  –o–text–overflow: clip;

  text–overflow: clip;

  background: #0D4D4D;

  –webkit–box–shadow: 0 5px 0 0 #003333 ;

  /*box-shadow: 0 5px 0 0 #003333 ;*/

  text–shadow: 0 1px 1px rgba(87,151,180,0.36) ;

  –webkit–transition: top 50ms cubic–bezier(0.42, 0, 0.58, 1);

  –moz–transition: top 50ms cubic–bezier(0.42, 0, 0.58, 1);

  –o–transition: top 50ms cubic–bezier(0.42, 0, 0.58, 1);

  transition: top 50ms cubic–bezier(0.42, 0, 0.58, 1);

      margin: 0 auto;

      text–align: center;

    border: solid 2px #0D4D4D !important;

    border–top–right–radius : 10px;

    border–bottom–right–radius : 10px;

}

.abonnement:hover {

  –webkit–transition: none;

  –moz–transition: none;

  –o–transition: none;

  transition: none;

}

.abonnement:active {

  top: 2px;

  –webkit–box–shadow: 0 3px 0 0 #003333 ;

  box–shadow: 0 3px 0 0 #003333 ;

  –webkit–transform–origin: 50% 100% 0;

  transform–origin: 50% 100% 0;

  color:#669999 ;

}

/*Positionnement et taille du boutton s’abboner*/

@media screen and (min–width: 800px) {

.mc4wp–form button, .mc4wp–form input[type=button], .mc4wp–form input[type=submit] {

    cursor: pointer;

    display: inline–block;

    –webkit–appearance: none;

    –moz–appearance: none;

    appearance: none;

    float: right;

    margin–top: –18%;

    margin–left: 250px;

    position: absolute;

    height: 41px !important;

}

@media screen and (min–width: 1280px){

  .mc4wp–form button, .mc4wp–form input[type=button], .mc4wp–form input[type=submit]{

    margin–top: –18%;

  }

}

}

@media screen and (min–width: 800px) {

.mc4wp–form button, .mc4wp–form input[type=button], .mc4wp–form input[type=submit]:focus{

    cursor: pointer;

    display: inline–block;

    –webkit–appearance: none;

    –moz–appearance: none;

    appearance: none;

    float: right;

    margin–top: –18%;

    margin–left: 250px;

    position: absolute;

}

}

`

Thanks you 🙂

If you love Ableton check my blog :
www.zikrea.com

[Radu]

Hi,

I’ve responded you here : https://archived.seventhqueen.com/forums/topic/css-problem-2

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts