Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Button Pack

The complement for the [rz] Layers extensions scheme.
This lightweight and highly customizable extension allows you to setup an image and/or text button with ease.
Similar to the rollover extension; no jQuery-based effects but proprietary smooth ones are available.
This button can receive focus, supports events and many link options and can even be embedded in a form.
Sample project file included.

Included versions: Advanced, Lite (or standard) and Ghost.

HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 2.1.3

Added "delegate" mode for links (advanced use); useful to delegate and manage links via external resources/handlers.
Smaller library files.

* New in version

Improved backward focus control compatibility.
Improved support for standard buttons and modal behavior simulations (useful for [rz] Alert and [rz] Confirm extensions; the '_link' suffix is not needed anymore).
Workaround for an Internet Explorer alignment bug in RTL mode (ghost version).

* New in version

Improved compatibility with [rz] Preloaded Links.

Unofficial (already removed in newer versions):
When using the [rz] Button as an interaction buttons in [rz] Alert or [rz] Confirm extensions, it is recommended to add the '_link' suffix (without the quotes) in the 'Close id' and 'Ok id' / 'Cancel id' properties, respectively; this improves the modal behavior simulation of the mentioned extensions. Please note that this may change in future versions!

* New in version 2.1.2

Workaround for font weight artifacts with some Google fonts in webkit-based browsers.
Workaround for text artifacts with custom shadows in some high-contrast scenarios (ghost version).
Workaround for a sporadic cache issue in Chrome during startup (standard version).
Workaround for a color transition bug in Edge (ghost version).

* New in version 2.1.1

New extension: [rz] Button (ghost); it is text-only based, lightweight, modern and versatile with highly customizable look and behavior.
Improved for iOS based touch devices.
Added image padding to [rz] Button (lite).
Text direction for better ltr and rtl handling.
Standard form-submit validation is not stricly required (recommended) to make the button work in "send" mode.
More transparencies variations.

* New in version 2.1

Added support for RWD.
Optimized core for faster loading and render times and smoother performance.

- Light version:

Improved clickable area dimensions.
Improved image resizing.
Added more horizontal alignment options.
Added vertical alignment options.

- Advanced version:

Workaround for rounded borders/rendering artifacts with custom shadows in FireFox.
Workaround for text borders/rendering artifacts with custom shadows in IE.
Added more image size options.

* New in version

Bug fixed in lite version; now the image is correctly restored back when the mouse is moved out of the button while it is being pressed.

* New in version 2.0

Text added with nine possible alignments plus horizontal and vertical offsets; also applies for the images.
Contrast area for the text.
Images, shadows, texts, border colors, background modes and colors, pattern images for normal/hover/push/disabled statuses of the button.
Images can be rendered in full width, full height, original width, original height or in a fixed size mode.
Texture/pattern for the button background.
Texture/pattern for the images (must have transparencies).
Can be placed within a form as a submit and reset button; automatically detects the javascript code with the form validation rules.
Many effects were added such as push-in, push-out, 3D-push with selectable directions, smart perspective handling to build metro-like buttons.
Rounded borders for button, image, and text contrast area.
Selectable transparency levels for the button, images, contrast area and text.
Allow/disallow borders overlapping for image/text size and position calculations.
Tooltips for enabled/disabled status; compatible with the [rz] Tooltip extension.
Selectable mouse cursor styles.
Smooth effects presets or customizable ones.
Smart effects release; links are triggered only when the button is completely back to its normal position and size.
The button can be enabled/disabled visible/hidden at design time.
...and many many more.

About the lite version:
This new pack comes with two versions, the [rz] Button (adv) and [rz] Button (std) modes.
The advanced mode has all the features described above and the standard mode is image-based only as the advanced predecessor in its initial times.
The lite mode also has new features:
Alignment: useful for left-to-right and right-to-left systems (when the clickable area is the whole button as appears in design mode).
Resizable icon: the icon can be displayed in its original size, in proportional modes or can cover the whole area of the button.
Click area: can be clicked the whole area of the button or only the icon.

* New in version 1.6

Resizable icons.
Rewritten from scratch and the workarounds were removed, not needed anymore.
The option to get or not the focus when the button is clicked (when possible, depends on the browsers/versions).
The images used for the button now aren't draggable (when possible).

* New in version 1.5

Improved mouse and keyboard handling to "onfocus", "onblur", "onmouseover" and "onmouseout" events with tab and enter keys (includes workarounds for Chrome and IE). This allows a full integration with the [rz] Layers extension set behavior.

Available javascript functions for advanced applications/manipulations:

- MyButton.enable(); changes to active mode.
MyButton.disable(); changes to inactive mode; no events and no actions will take place.
MyButton.setfocus(); forces the button to get the focus.
MyButton.losefocus(); forces the button to lose the focus.
-; makes the button visible.
MyButton.hide(); hides the button.


- MyButton.focus returns true when the button has the focus.
MyButton.hover returns true when the mouse is over the button.

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with