0

these are the two types of buttons that i have in my project and i want to apply same css to both of them but i am failing to do so and i am not sure why the first is:

<a href="#" class="btn btn-primary">Add</a>

second kind is:

 <input class="btn btn-primary" type="submit" value="Add" name="add1" onclick='if (confirm(&quot;Check all the entry ?&quot;))
            { document.post_57a43df006372873848099.submit(); }
            event.returnValue = false; return false;' >

following is the css to my code:

.btn {
  position: relative;
  font-size: 16px;
  color: black;
  text-decoration: none;
  display: inline-block;
  border: 3px solid #333333;
  border-radius: 5px;
  padding: 10px;
  margin-top: 25px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-weight: 300;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.btn span {
  position: relative;
  z-index: 1;
}

.btn:before {
  display: block;
  position: absolute;

  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  content: '';
  border-color: #97455f;
  border-style: solid;
  border-width: 1px;
  border-radius: 100px;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  box-sizing: border-box;
}

.btn:hover {
  color:white ;
}


.btn:hover:before {
  border-width: 100px;
}

so i am using class btn on both but the css is only being applied to the and i dont know why. any help would be appreciated! code here : https://jsfiddle.net/jy4gth0x/

fff
  • 41
  • 3
  • 5
    That is because `` is a **replaced element** and it does not support pseudo-elements. If you change it to ` – Terry Aug 12 '17 at 21:44
  • 1
    Possible duplicate of [Can I use the :after pseudo-element on an input field?](https://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field) – Terry Aug 12 '17 at 21:44
  • @terry https://jsfiddle.net/jy4gth0x/5/ still cant use the same css properly – fff Aug 12 '17 at 22:21
  • its hard to give a solution without seeing the console. Maybe its because some of the styles are overridden. Try to add `!important` behind the styles, that are not taken. – Krystian Aug 13 '17 at 04:54

0 Answers0