Reputation: 67
HTML/CSS - Change button to point in oposite direction
I have this awesome button from the Internet, which has a feature to display an arrow facing to the right. Now, I have another button, which goes to a previous page, so common sense would say that the arrow on the button should point to the left.
So I changed all the values which have to do with right-animation to a value for a left-animation, but it doesn't quite work.
I don't understand this quite enough, that's why I'm asking if someone with a better understanding of this can help me out.
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
width: 200px;
}
.button > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button > span:after {
content: ' »';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover > span {
padding-right: 25px;
}
.button:hover > span:after {
opacity: 1;
right: 0;
}<button class='button'><span>Back</span>
</button>
<button class='button'><span>Again</span>
</button>I have this CSS in a common.css which defines a 'standard' button, and in the stylesheets of the page where this HTML is found, it changes some of the CSS (so here the change for my problem must be made) to fit the page's need.
CSS:
li:last-child .button {
width: 200px;
font-size: 22px;
padding: 13px;
}
If anyone could help me out here , I'd be very pleased.
Cheers'
EDIT:
The .button in the common.css has also an width property.
Upvotes: 0
Views: 2437
Answers (5)
Reputation: 867
Do this:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.forward > span:after {
content: ' »';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.back > span:after {
content: '« ';
position: absolute;
opacity: 0;
top: 0;
left: 0px;
transition: 0.5s;
}
.forward:hover > span {
padding-right: 25px;
}
.back:hover > span {
padding-left: 25px;
}
.forward:hover > span:after {
opacity: 1;
right: 0;
}
.back:hover > span:after {
opacity: 1;
left: 0;
}<html>
<body>
<button class='button back'><span>Back</span>
</button>
<button class='button forward'><span>Again</span>
</button>
</body>
</html>Check out this fiddle: https://jsfiddle.net/L04y8m9e/
As an alternative, if you really really need to keep the original css, then the solution would be to change the class of the back button from "button" to "backbutton" so that the standard button css does not apply and then copy all the button styles to new "backbutton" styles making the necessary changes.
See this fiddle: https://jsfiddle.net/vg0oLuLh/
New version of html:
<button class='backbutton'><span>Back</span></button>
<button class='button'><span>Again</span></button>
New css to add (the old css remains unchanged):
.backbutton {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
width: 200px;
}
.backbutton > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.backbutton > span:after {
content: '« ';
position: absolute;
opacity: 0;
top: 0;
left: 0px;
transition: 0.5s;
}
.backbutton:hover > span {
padding-left: 25px;
}
.backbutton:hover > span:after {
opacity: 1;
left: 0;
}
Upvotes: 2
Reputation: 131
Check this..
HTML:
<button class='button'><span>Back</span></button>
<button class='button'><span>Again</span></button>
CSS:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button > span:before {
content: ' <<';
position: absolute;
opacity: 0;
top: 0;
left:-10px;
transition: 0.5s;
}
.button:hover > span {
padding-left: 25px;
}
.button:hover > span:before {
opacity: 1;
left: -10px;
}
Upvotes: 0
Reputation: 466
Use the CSS3 transform property. Play around with the rotate(Xdeg) value.
For more information regarding this property, you can check its details on http://www.w3schools.com/cssref/css3_pr_transform.asp, or https://developer.mozilla.org/en-US/docs/Web/CSS/transform.
Upvotes: 0
Reputation: 2446
Hi ive edited your code and got something like this:
.button:first-child > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button:first-child > span:before {
content: '» ';
position: absolute;
opacity: 0;
top: 0;
left: -20px;
transition: 0.5s;
}
.button:first-child:hover > span {
padding-left: 25px;
}
.button:first-child:hover > span:before {
opacity: 1;
left: 0;
}
here is a working example: https://jsfiddle.net/xde9046k/2/
Upvotes: 0
Reputation: 8386
Here is your fixed code:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonAgain > span:after {
content: ' »';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.buttonBack > span:before {
content: '« ';
position: absolute;
opacity: 0;
top: 0;
left: -70px;
transition: 0.5s;
}
.buttonAgain:hover > span {
padding-right: 25px;
}
.buttonBack:hover > span {
padding-left: 25px;
}
.buttonAgain:hover > span:after {
opacity: 1;
right: 0;
}
.buttonBack:hover > span:before {
opacity: 1;
right: 0;
}
Upvotes: 1