Page 1 of 1
active transform on button
Posted: Mon Aug 06, 2018 2:47 pm
by IanRob
Hi
I am trying to get an active button style of
button:active {
transform: translateY(4px);
-webkit-transform: translateY(4px); /* Safari */
}
I can get transform translate but cannot see how to put in the Y(4px)
Thansk for any help on this
Re: active transform on button
Posted: Mon Aug 06, 2018 4:05 pm
by Pablo
I'm sorry, I cannot help you with custom code.
But if you are an advanced user then you can use pseudo classes to apply an active style to a button.
http://wysiwygwebbuilder.com/pseudoclasses.html
Re: active transform on button
Posted: Tue Aug 07, 2018 6:21 am
by IanRob
Sorry
I did not make it very clear
I am looking for how to select transform:translate animation command in WB14
In other words how do I put in the standard x and y coordinates in the standard html5 animation command defined at
https://www.w3schools.com/css/css3_2dtransforms.asp
Example given in that page
div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
Re: active transform on button
Posted: Tue Aug 07, 2018 6:48 am
by Pablo
In animations/transitions you can set the parameters of the transform in the properties.
Related tutorial:
http://wysiwygwebbuilder.com/transitions.html
Re: active transform on button
Posted: Tue Aug 07, 2018 7:02 am
by IanRob
Thank you and sorry for being slow,
I can see that is annimations on a selected object
How do you set those properties when the animation is in the style sheet?
Re: active transform on button
Posted: Tue Aug 07, 2018 9:08 am
by Pablo
How do you set those properties when the animation is in the style sheet?
What exactly do you mean by that?
Animations are defined in the Animation Manager, not in the Style Manager.
Re: active transform on button
Posted: Tue Aug 07, 2018 9:37 am
by IanRob
For simplicity, I have put the styles in the header of the html form below. If you run it locally, you will see the buttons move on click
Obviously, the style would normally be in a style sheet
So I am trying to work out how WB14 would put moving buttons in a style sheet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
.button {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
padding: 32px 25px;
font-size: 24px;
outline: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #ce1e18}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translate(0px, 4px);
}
</style>
</head>
<body>
<input type="button" id="Button2" name="Button2" class="button" style="width: 220px; height: 110px;" value="cold">
<button id="ans4" class="button" style="width: 220px; height: 110px;" value="button" ></button>
</body>
</html>
Re: active transform on button
Posted: Tue Aug 07, 2018 9:42 am
by Pablo
I'm sorry, but I cannot help you with custom code.
I can only give support on the built-in functionality.
As previously mentioned you can define pseudo classes in the Style Manager. You do not have to write the code yourself.
http://wysiwygwebbuilder.com/pseudoclasses.html
Re: active transform on button
Posted: Tue Aug 07, 2018 10:06 am
by IanRob
Thank you for your reply and patience
Yes I am aware that style manager will write the code for pseudoclasses
However, in style manager, when you select transform propery in animation, it does not give a translate option or nor does it ask for x, y coordinates.
Re: active transform on button
Posted: Tue Aug 07, 2018 10:35 am
by BaconFries
To use a external stylesheet you would insert the css without the <style></style> into notepad or something similar save with a name such as yours.css and then use the following between the <head></head> tags. This is just for information only and can't assist you with custom code.
Code: Select all
<link href="yourcssclass.css" rel="stylesheet" type="text/css">