Copy button from website

[theenrico]

Hi, how can I create this button on blocs?
You can find it on this website: Creative Button Styles

[hendon52]

These buttons are all created with CSS. The button you referenced uses a number of classes beginning with btn-3. To recreate the buttons, you would copy the CSS styles from the page source and paste them into the page (between style tags) either using a code widget directly on the page, or by pasting them into the page head code. You will also need to add the icon fonts. Once that is done, create a button and then apply all the classes that are assigned to the button. You won’t see the style until you preview the page.

[theenrico]

How can I copy the button? Then I have to create a button and add the css in page header?

I copied this (check the video) and added a button with “btn-3d” class, but when I preview the website, it show me blank page
https://drive.google.com/file/d/17XqGli_FwM0QuWSGwBYNfOPuad0rCXN-/view?usp=sharing

[hendon52]

You add a standard button to the page. You then apply the classes to the button in order to style it. The CSS styles you must add to your page are:

    /* Button 3d */
    .btn-3d {
    	padding: 25px 60px 25px 120px;
    	border-radius: 10px;
    }

    .btn-3d:before {
    	background: #fff;
    	color: #fcad26;
    	z-index: 2;
    	border-radius: 10px 0 0 10px;
    }

    .btn-3d:after {
    	width: 20px;
    	height: 20px;
    	background: #fff;
    	z-index: 1;
    	left: 55px;
    	top: 50%;
    	margin: -10px 0 0 -10px;
    	-webkit-transform: rotate(45deg);
    	-moz-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	transform: rotate(45deg);
    }

    .btn-3d:active:before {
    	color: #f58500;
    }

    .btn-3d:active {
    	top: 0;
    }

    .btn-3d:active:after {
    	left: 60px;
    }
/* Pseudo elements for icons */
.btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.icon-envelope:before {
	content: "\e000";
}

.icon-cart:before {
	content: "\e007";
}

.icon-cart-2:before {
	content: "\e008";
}

.icon-heart:before {
	content: "\e009";
}

/* Filled heart */
.icon-heart:after,
.icon-heart-2:before {
	content: "\e00a";
}

.icon-star:before {
	content: "\e00b";
}

/* Filled star */
.icon-star:after,
.icon-star-2:before {
	content: "\e00c";
}

.icon-arrow-right:before {
	content: "\e00d";
}

.icon-arrow-left:before {
	content: "\e003";
}

.icon-truck:before {
	content: "\e00e";
}

.icon-remove:before {
	content: "\e00f";
}

.icon-cog:before {
	content: "\e010";
}

.icon-plus:before,
.icon-plus:after {
	content: "\e011";
}

.icon-minus:before {
	content: "\e012";
}

.bh-icon-smiley:before {
	content: "\e001";
}

.bh-icon-sad:before {
	content: "\e002";
}

.icon-file:before {
	content: "\e004";
}

.icon-remove-2:before {
	content: "\e005";
}

You can add the above through the blocs code editor. This will make all the styles available to you for use in your project. Just add the class names (without the preceding dots) into the classes window. When you preview, you will see that the button has been styled.

Note: you will also have to get copies of the font files used for icons and add them to your project - I believe the font is called icomoon. The author of the webpage embedded the fonts with the following head code:

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot');
	src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff') format('woff'),
		url('../fonts/icomoon/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;

All of the page code must be set between style tags - ie. <style> .......</style>

[theenrico]

I did this, and I have always the blank page
I copy-pasted your code:

and this is the preview

[hendon52]

Did you add a button bric to the page? Did you apply the relevant classes to the button?

[theenrico]

Yes, can you send ma a bloc files with only the new button?

[PeteSharp]

The last tag of your CSS needs to be a closing tag.

<style>
   your css goes here.
</style>