CODEWITHSUNDEEP
css
intel
intel

Reputation: 5

Transition Of CSS Button Not Working

I have created a ghost button in CSS and everything is working perfectly well except that the transition of the word after which the user hovers his mouse on the original word is not moving. I want the word "View Details: to move 5px to the left on mouse hover. This might only need one line of code. Thx (-:

.btn_action_1 {
  border: 5px solid #000 !important;
  /* Change button border color */
  color: #000 !important;
  /* Change button text color */
  font-size: 24px;
  line-height: 0;
  display: inline-block;
  padding: 10px 20px 10px;
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
  z-index: 3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn_action_1 span {
  left: 10px;
  position: relative;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.btn_action_1 .ico_arrow {
  background: url(ico_arrow_w.png) 0 center no-repeat;
  display: inline-block;
  height: 17px;
  width: 17px;
  position: relative;
  left: -10px;
  top: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.btn_action_1:hover {
  background: #000 !important;
  /* Change button background color when mouse over */
  color: #fff !important;
  /* Change button text color when mouse over */
}
.btn_action_1:hover span {
  left: -10px;
}
.btn_action_1:hover .ico_arrow {
  opacity: 1;
  filter: alpha(opacity=100);
  left: 0px;
}
@media (max-width: 479px) {
  .btn_action_1 {
    padding: 18px 30px;
  }
}
.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
  display: none
}
<a href="#">
  <span class="default">Product Name</span>
  <span class="hover">View Details</span>
  <i class="ico_arrow"></i>
</a>

Upvotes: 0

Views: 376

Answers (1)

user5322657
user5322657

Reputation: 63

HTML

<div class="btn_action_1">
  <span class="ico_arrow"></span>
  <span>some text</span>
</div>

CSS

.btn_action_1 {
  border: 5px solid #000 !important;
  /* Change button border color */
  color: #000 !important;
  /* Change button text color */
  font-size: 24px;
  line-height: 0;
  display: inline-block;
  padding: 10px 20px 10px;
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
  z-index: 3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn_action_1 span {
  left: 10px;
  position: relative;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.btn_action_1 .ico_arrow {
  background: url(ico_arrow_w.png) 0 center no-repeat;
  display: inline-block;
  height: 17px;
  width: 17px;
  position: relative;
  left: -10px;
  top: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.btn_action_1:hover {
  background: #000 !important;
  /* Change button background color when mouse over */
  color: #fff !important;
  /* Change button text color when mouse over */
}

.btn_action_1:hover span {
  left: -10px;
}

.btn_action_1:hover .ico_arrow {
  opacity: 1;
  filter: alpha(opacity=100);
  left: 0px;
}

@media (max-width: 479px) {
  .btn_action_1 {
    padding: 18px 30px;
  }
}

.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
  display: none
}

guessing the HTML code here

http://codepen.io/anon/pen/grNpPq

this seems to work, on chrome 52.

Upvotes: 1

Related Questions