# ghostkit/3.3.3/gutenberg/blocks/button-single/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.3. 67 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/blocks/button-single/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.3/raw/gutenberg/blocks/button-single/index.js
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/blocks/button-single/index.js#L10-L20`.

```javascript
import getIcon from '../../utils/get-icon';
import metadata from './block.json';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon: getIcon('block-button', true),
	ghostkit: {
		customStylesCallback(attributes) {
			const styles = {
				'--gkt-button__background-color': attributes.color || undefined,
				'--gkt-button__color': attributes.textColor || undefined,
				'--gkt-button__border-radius': undefined,
				'--gkt-button__border-width': undefined,
				'--gkt-button__border-color':
					attributes.borderColor || undefined,
				'--gkt-button-hover__background-color':
					attributes.hoverColor || undefined,
				'--gkt-button-hover__color':
					attributes.hoverTextColor || undefined,
				'--gkt-button-hover__border-color':
					attributes.hoverBorderColor || undefined,
				'--gkt-button-focus__background-color':
					attributes.hoverColor || undefined,
				'--gkt-button-focus__color':
					attributes.hoverTextColor || undefined,
				'--gkt-button-focus__box-shadow': undefined,
			};

			// Border.
			if (
				typeof attributes.borderRadius !== 'undefined' &&
				attributes.borderRadius !== ''
			) {
				styles['--gkt-button__border-radius'] =
					`${attributes.borderRadius}px`;
			}
			if (
				typeof attributes.borderWeight !== 'undefined' &&
				attributes.borderWeight !== ''
			) {
				styles['--gkt-button__border-width'] =
					`${attributes.borderWeight}px`;
			}

			// Box Shadow.
			if (
				typeof attributes.focusOutlineWeight !== 'undefined' &&
				attributes.focusOutlineColor
			) {
				styles['--gkt-button-focus__box-shadow'] =
					`0 0 0 ${attributes.focusOutlineWeight}px ${attributes.focusOutlineColor}`;
			}

			return styles;
		},
	},
	edit,
	save,
	deprecated,
};

```