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: 59
Joined: Sat Jul 21, 2018 11:52 am

active transform on button

Post by IanRob » Mon Aug 06, 2018 2:47 pm

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: 14502
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post by Pablo » Mon Aug 06, 2018 4:05 pm

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: 59
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post by IanRob » Tue Aug 07, 2018 6:21 am

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: 14502
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post by Pablo » Tue Aug 07, 2018 6:48 am

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

Related tutorial:
http://wysiwygwebbuilder.com/transitions.html

IanRob
 
 
Posts: 59
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post by IanRob » Tue Aug 07, 2018 7:02 am

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: 14502
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post by Pablo » Tue Aug 07, 2018 9:08 am

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: 59
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post by IanRob » Tue Aug 07, 2018 9:37 am

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: 14502
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: active transform on button

Post by Pablo » Tue Aug 07, 2018 9:42 am

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: 59
Joined: Sat Jul 21, 2018 11:52 am

Re: active transform on button

Post by IanRob » Tue Aug 07, 2018 10:06 am

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: 4187
Joined: Thu Aug 16, 2007 7:32 pm

Re: active transform on button

Post by BaconFries » Tue Aug 07, 2018 10:35 am

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

Who is online

Users browsing this forum: No registered users and 2 guests