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.
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;
}
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;
}
Here is the JSFiddle demo
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/
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.
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;
}
Related
Link to button Code
Hey i don't use css much, how can i have the ripple effect on this button starting from right side of button to the left side. Basically changing the direction of the ripple effect.
.button {
position: relative;
background-color: #04AA6D;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
If you want the ripple effect to start from the right side, simply add right: 0; to ".button:after". See example below. Tested and works.
.button {
position: relative;
background-color: #04AA6D;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
right: 0; /* New code */
position: absolute;
padding-top: 300%;
padding-right: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<button class="button">Click me</a>
This is my code before I add the link:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 12px;
background-color: #33ccff;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 22px;
padding: 20px;
width: 195px;
transition: all 0.5s;
cursor: pointer;
margin: 3px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
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;
}
</style>
</head>
<body>
<button class="button" ><span>DOWNLOAD </span></button>
</body>
</html>
It looks like this:
I want to add a link to the code so when I press the button it redirects me to a different website. I tried to add a link to my button, but the button was smaller, it has a gray background and the text was black. Also, when I click on it, it didn't take me to the website that I wanted it to take me.
I found this one post right here: Add URL link in CSS & Html to button,
but I really don't know what the .ui-state-highlight class means or where I should keep it.
Could you please show me how to add a link to the button code above so when I press on the button, it redirects me to a different website.
Thanks!
Typically, a link tag would work better. Buttons are used for things such as submitting a form.
You can keep your css. Just change the button to be like so:
<a class="button" href="yourwebsitehere.com">DOWNLOAD</a>
Here is a plunker:
.button {
display: inline-block;
border-radius: 12px;
background-color: #33ccff;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 22px;
padding: 20px;
width: 195px;
transition: all 0.5s;
cursor: pointer;
margin: 3px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
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;
}
<!DOCTYPE html>
<html>
<body>
<a href="https://stackoverflow.com" class="button" ><span>DOWNLOAD </span></a>
</body>
</html>
As you can see i changed the button element to an a element and added href attribute.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 12px;
background-color: #33ccff;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 22px;
padding: 20px;
width: 195px;
transition: all 0.5s;
cursor: pointer;
margin: 3px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
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;
}
</style>
</head>
<body>
<button class="button" onclick="changeSite()"><span>DOWNLOAD </span></button>
<script>
function changeSite()
{
var siteName;
siteName="https://www.google.com/";
window.location.href=siteName;
}
</script>
</body>
</html>
Hello sorry for my bad english
I looking for answer on internet but it couldn't help me somehow maybe i just cant figure it out. I just need to fit those long word in button.
this is how it looks like now. I posted my code on jsfiddle below
Jsfiddle FIXED
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>
Hello its me i found my problem because there was white-space:nowrap in parent div so i cant fit any word in child elements
<div class="w3-display-middle w3-large w3-animate-opacity" id="divclick3" style="white-space:nowrap;">
buttons with spans
</div>
JSFIDDLE FIXED V.2
there is my broken js and i want to achieve all those 4 buttons in 1 line like this next to it
Just add
word-break: break-all;
to the .chkbox class.
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
word-break: break-all;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>
Should be width:auto; instead of width:150px; inside .chkbox
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:auto;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>
If you want to add more content with 150px width then you can enter valuable text instead of garbage value.
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>this is testing here this is testing here</span></label></button>
The only way I can think of is to use .chkbox span {word-break: break-word} - Read more here
You may be able to improve this with hyphenation as well.
I used this word
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width: 150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
word-break: break-word;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></label></button>
I want to show panel1(div) when I hover button1, show panel2(div) when I hover button2. But the problem now is that the panel won't align top with the button. I've tried "Vertical-Align, Align-items", still couldn't figure out how to do it, please help!
But it always display like this:
Here is my code
HTML:
<div class="Nav">
<span id='Span_Nav'>
<button class="Btn_Nav" id="Btn_Nav_Equipment" >
<div class="Panel_Nav" id='Panel_Equipment'></div>
<span>
<label class="Lb_Nav">Equipment</label>
</span>
</button>
<button class="Btn_Nav" id="Btn_Nav_Report">
<div class="Panel_Nav" id='Panel_Report' ></div>
<span>
<label class="Lb_Nav">Report</label>
</span>
</button>
</span>
</div>
CSS:
.Btn_Nav{
width: 100%;
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
border: 0;
height: 6vh;
}
.Btn_Nav > span{
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
color: white;
background: transparent;
background-color: transparent;
display: inline-block;
}
#Span_Nav{
position: absolute;
width: 100%;
top:10vh;
}
button > div.Panel_Nav {
margin-top: 0;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
vertical-align: top;
visibility: hidden;
opacity: 0;
left: 100%;
width: 500%;
height: 6vh;
background: #0f5787;
border: 2px solid;
outline: none;
}
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
}
Check your answer here https://jsfiddle.net/g3yL9cro/1/
.Btn_Nav{
position: relative;
}
button:hover > div.Panel_Nav {
top: 0px;
}
Update 2: Based on OP's fiddle
.Btn_Nav > span{
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
background: transparent;
background-color: transparent;
display: inline-block;
}
#Span_Nav{
position: absolute;
width: 100px;
top:10px;
}
button > div.Panel_Nav {
margin-top: -2px;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
visibility: hidden;
opacity: 0;
left: 100%;
width: 500%;
height: 20px;
background: #0f5787;
outline: none;
}
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
}
Update 1:
CSS code
body {
padding: 5px;
background: blue;
}
.Btn_Nav{
width: 10%;
background: #eee;
background-color: #eee;
display: block;
margin: 20px;
border: 0;
height: 100%;
}
.Btn_Nav > span > label.Lb_Nav{
color: #333;
background: transparent;
background-color: transparent;
display: block;
}
#Span_Nav{
position: absolute;
width: 100%;
}
button > div.Panel_Nav {
margin-top: -2px;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
vertical-align: top;
display: none;
opacity: 0;
left: 12%;
width: 50%;
height: 18px;
background: #0f5787;
}
button:hover > div.Panel_Nav {
display: block;
opacity: 1;
}
Adding a top value fixes the issue.
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
top: 0;
}
Good Afternoon,
I realize this topic has been asked several times and has got several solutions to as I have seen from searching your forums.
But solutions such as,
<input type="button" value="Click Me" **style="float: right;"**>,
Even though do successfully align the button to the right, they overlap my footer as the button is supposed to be right above the footer. This is my code:
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
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;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<footer class="containers-fluid text-center">
</footer>
Just add style float:right to your button
add this between button and footer
<div class="clearfix"></div>
and css for clearfix
.clearfix{
clear: both;
}
Read more about clearfix
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
float: right;
display: block;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
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;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
.clearfix{
clear: both;
}
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<div class="clearfix"></div>
<footer class="containers-fluid text-center">
</footer>
You can use float:right and set the position attribute to relative
Just wrap them both inside a container with display:flex;flex-direction:row; and then apply margin-right:0; to the button.
See the code below
.container{
display:flex;
flex-direction:column;
}
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px 0 5px auto;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
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;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
<div class="container">
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<footer class="containers-fluid text-center">
</footer>
</div>