0

I´m trying to style my Drupal theme buttons but there´s something wrong when I put the same CSS into the "input" tag.

In this snippet example we can verify 2 different effect with the same CSS code.

I thought it was a Drupal problem but it´s not. When I got the code outside and try it with the input tag it shows the same way like in Drupal site.

/* Buttons */
.form-submit {
  cursor: pointer;
  margin-left: 5px;
  margin-bottom: 15px;
  text-shadow: 0 -2px 0 #4a8a65, 0 1px 1px #c2dece;
  box-sizing: border-box;
  font-size: 2em;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  font-weight: bold;
  color: #5ea97d;
  height: 65px;
  line-height: 65px;
  padding: 0 32.5px;
  display: inline-block;
  width: auto;
  background: -webkit-gradient(linear, left top, left bottom, from(#9ceabd), color-stop(26%, #9ddab6), to(#7fbb98));
  background: linear-gradient(to bottom, #9ceabd 0%, #9ddab6 26%, #7fbb98 100%);
  border-radius: 5px;
  border-top: 1px solid #c8e2d3;
  border-bottom: 1px solid #c2dece;
  top: 0;
  -webkit-transition: all 0.06s ease-out;
  transition: all 0.06s ease-out;
  position: relative;
}
.form-submit:visited {
  color: #5ea97d;
}

.form-submit:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#baf1d1), color-stop(26%, #b7e4ca), to(#96c7ab));
  background: linear-gradient(to bottom, #baf1d1 0%, #b7e4ca 26%, #96c7ab 100%);
}

.form-submit:active {
  top: 6px;
  text-shadow: 0 -2px 0 #7fbb98, 0 1px 1px #c2dece, 0 0 4px white;
  color: white;
}
.form-submit:active:before {
  top: 0;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.7), 0 3px 9px rgba(0, 0, 0, 0.2);
}

.form-submit:before {
  display: inline-block;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  top: 6px;
  border-radius: 5px;
  height: 65px;
  background: linear-gradient(to top, #1e5033 0%, #378357 6px);
  -webkit-transition: all 0.078s ease-out;
  transition: all 0.078s ease-out;
  box-shadow: 0 1px 0 2px rgba(0, 0, 0, 0.3), 0 5px 2.4px rgba(0, 0, 0, 0.5), 0 10.8px 9px rgba(0, 0, 0, 0.2);
}
<input type="submit" id="edit-submit" name="op" value="Comprar" class="form-submit">
<a class="form-submit" href="#0">Comprar</a>
Anderson
  • 1
  • 3

2 Answers2

0

Pseudo-elements ::before & ::after do not work with certain elements like inputs. The difference in rendering comes from there. The question has already been raised, I invite you to read this answer for more details.: https://stackoverflow.com/a/4660434

Armand
  • 168
  • 2
  • 9
  • I didn´t know that. I saw the link and there seems to have a lot of workarounds but as I am working with Drupal I can´t change its code but its style. Drupal styles for buttons are .form-submit and .form-submit:hover only. I am wondering if I can do some work around. – Anderson Sep 18 '20 at 14:23
  • I'm not familiar with Drupal, but from what I've read there are hooks like WordPress that might help. You should look for how to replace an input element by a button on Drupal. Here is an example but I don't know if this is the best way to do it: https://drupal.stackexchange.com/a/226494 – Armand Sep 18 '20 at 14:58
  • Hi, thanks for providing more info. I took a look at that but I use Drupal 7 instead 8. – Anderson Sep 18 '20 at 15:34
  • I searched the keywords "replace an input element by a button on Drupal" and also found https://www.drupal.org/forum/support/module-development-and-code-questions/2013-11-13/change-a-to-a-in-a-search-form The problem is that I need to change all form-submit and I need some more practical since all suposed solutions has a load of work. – Anderson Sep 18 '20 at 15:38
0

Well, well... I am not a CSS expert, actually I´m some self-taught but I could improve the solution for the question like this snipet below. If we can´t do something in a specific way we have to think outside the box and find a way to make it work anyway. If not equal but similar what was intended to be. Anybody could help me make it better than this?

/* Buttons */
.form-submit {
  /* :before */

  top: 6px;
  border-radius: 5px;
  height: 65px;
  background: linear-gradient(to top, #1e5033 0%, #378357 6px);
  /* -webkit-transition: all 0.078s ease-out; 
  transition: all 0.078s ease-out; */ 
  box-shadow: 0 1px 0 2px #9ddab6, 0 5px 2.4px #7fbb98, 0 8px 9px rgba(0, 0, 0, 0.2);
  
  cursor: pointer;
  margin-left: 5px;
  margin-bottom: 15px;
  text-shadow: 0 -2px 0 #4a8a65, 0 1px 1px #c2dece;
  box-sizing: border-box;
  font-size: 2em;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  font-weight: bold;
  color: #5ea97d;
  height: 65px;
  line-height: 65px;
  padding: 0 32.5px;
  display: inline-block;
  width: auto;
  background: -webkit-gradient(linear, left top, left bottom, from(#9ceabd), color-stop(26%, #9ddab6), to(#7fbb98));
  background: linear-gradient(to bottom, #9ceabd 0%, #9ddab6 26%, #7fbb98 100%);
  /* border-radius: 5px; */
  border-top: 1px solid #c8e2d3;
  border-bottom: 1px solid #c2dece;
  top: 0;
  -webkit-transition: all 0.06s ease-out;
  transition: all 0.06s ease-out;
  position: relative;
}


.form-submit:visited {
  color: #5ea97d;
}

.form-submit:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#baf1d1), color-stop(26%, #b7e4ca), to(#96c7ab));
  background: linear-gradient(to bottom, #baf1d1 0%, #b7e4ca 26%, #96c7ab 100%);
}

.form-submit:active {
  top: 6px;
  text-shadow: 0 -2px 0 #7fbb98, 0 1px 1px #c2dece, 0 0 4px white;
  color: white;
  box-shadow: 0 0px 0 2px rgba(0, 0, 0, 0.3), 0 0px 2.4px rgba(0, 0, 0, 0.5), 0 0px 9px rgba(0, 0, 0, 0.2);
}
<input type="submit" id="edit-submit" name="op" value="Comprar" class="form-submit">
<a class="form-submit" href="#0">Comprar</a>
Anderson
  • 1
  • 3