active transform on button

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
IanRob
 
 
Posts: 24
Joined: Sat Jul 21, 2018 11:52 am

active transform on button

Post 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
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post 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
IanRob
 
 
Posts: 24
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post 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);
}
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post by Pablo »

In animations/transitions you can set the parameters of the transform in the properties.

Related tutorial:
http://wysiwygwebbuilder.com/transitions.html
IanRob
 
 
Posts: 24
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post 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?
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post 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.
IanRob
 
 
Posts: 24
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post 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>
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post 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
IanRob
 
 
Posts: 24
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post 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.
User avatar
BaconFries
 
 
Posts: 5326
Joined: Thu Aug 16, 2007 7:32 pm

Re: active transform on button

Post 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">
Post Reply