Button collection

Button 1

Source code

Html


	<button class="reset-btn round-icon round-icon--revert flex--vertical-center">
		<svg class="round-icon__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.8 268.8"><path d="M265.2 125.6l-80-80c-4.9-4.9-12.8-4.9-17.7 0 -4.9 4.9-4.9 12.8 0 17.7l58.7 58.7H12.5c-6.9 0-12.5 5.6-12.5 12.5 0 6.9 5.6 12.5 12.5 12.5h213.7l-58.7 58.7c-4.9 4.9-4.9 12.8 0 17.7 2.4 2.4 5.6 3.7 8.8 3.7s6.4-1.2 8.8-3.7l80-80C270.1 138.4 270.1 130.5 265.2 125.6z" /></svg>
	</button>
	<button class="reset-btn round-icon flex--vertical-center">
		<svg class="round-icon__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.8 268.8"><path d="M265.2 125.6l-80-80c-4.9-4.9-12.8-4.9-17.7 0 -4.9 4.9-4.9 12.8 0 17.7l58.7 58.7H12.5c-6.9 0-12.5 5.6-12.5 12.5 0 6.9 5.6 12.5 12.5 12.5h213.7l-58.7 58.7c-4.9 4.9-4.9 12.8 0 17.7 2.4 2.4 5.6 3.7 8.8 3.7s6.4-1.2 8.8-3.7l80-80C270.1 138.4 270.1 130.5 265.2 125.6z" /></svg>
	</button>

Scss


// local var
$icon-size: 5rem;

.round-icon {
	width: $icon-size;
	height: $icon-size;
	display: inline-block;
	position: relative;
	text-align: center;
	cursor: pointer;
	&:hover {
		&:before {
			transform: scale(1);
		}

		.round-icon__item {
			fill: $color-white;
		}
	}
	&::before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: $color-blue-tory;
		border-radius: 50%;
		transform: scale(0);
		transition: transform $transition--fast;
	}

	&__item {
		margin-top: .25rem;
		position: relative;
		z-index: 1;
		width: $icon-size / 2;
		height: $icon-size / 2;
		fill: $color-black;
		transition: fill $transition--fast;
	}

	&--revert {
		.round-icon__item {
			transform: rotate(180deg);
		}
	}
}

@include viewport-medium {

	.round-icon {

		&::before {
			transform: scale(1);
		}

		&__item {
			fill: $color-white;
		}
	}
}

Button 2

Source code

Html


<button class="reset-btn square-icon flex--vertical-center">
  <span class="square-icon__text">Din tekst her</span>
  <svg
    class="square-icon__item"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 268.8 268.8"
  >
    <path
      d="M265.2 125.6l-80-80c-4.9-4.9-12.8-4.9-17.7 0 -4.9 4.9-4.9 12.8 0 17.7l58.7 58.7H12.5c-6.9 0-12.5 5.6-12.5 12.5 0 6.9 5.6 12.5 12.5 12.5h213.7l-58.7 58.7c-4.9 4.9-4.9 12.8 0 17.7 2.4 2.4 5.6 3.7 8.8 3.7s6.4-1.2 8.8-3.7l80-80C270.1 138.4 270.1 130.5 265.2 125.6z"
    ></path>
  </svg>
</button>

Scss


$icon-height: 10rem;

.square-icon {
	height: $icon-height;
	min-height: $icon-height;
	position: relative;
	cursor: pointer;
	transition: $transition--fast;

	&__text {
		font-size: $icon-height / 5;
		z-index: 1;
		margin-right: $icon-height;
		transition: all $transition--fast;
	}

	&__item {
		z-index: 1;
		width: $icon-height / 5;
		height: $icon-height / 5;
		fill: $color-black;
		transition: all $transition--fast;
	}

	&::before {
		content: "";
		width: 100%;
		height: 2%;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: height $transition--fast;
		background-color: $color-black;
	}
}

.square-icon:hover {
	&:before {
		height: 100%;
	}

	.square-icon {
		&__text {
			transform: translate3d(1.5rem, 0, 0);
			color: $color-white;
		}

		&__item {
			transform: translate3d(-1.5rem, 0, 0);
			fill: $color-white;
		}
	}
}

@include viewport-medium {
	.square-icon {
		&:before {
			height: 100%;
		}

		&__text {
			transform: translate3d(1.5rem, 0, 0);
			color: $color-white;
		}

		&__item {
			transform: translate3d(-1.5rem, 0, 0);
			fill: $color-white;
		}
	}
}

Button 3

Source code

Html


<button class="reset-btn rounded-square-icon flex--vertical-center flex--space-between">
  <span class="rounded-square-icon__text">Din tekst her</span>
  <span class="rounded-square-icon__plus">+</span>
  <span class="rounded-square-icon__dot">&#11044;</span>
</button>

Scss


$icon-height: 10rem;

.square-icon {
	height: $icon-height;
	min-height: $icon-height;
	position: relative;
	cursor: pointer;
	transition: $transition--fast;

	&__text {
		font-size: $icon-height / 5;
		z-index: 1;
		margin-right: $icon-height;
		transition: all $transition--fast;
	}

	&__item {
		z-index: 1;
		width: $icon-height / 5;
		height: $icon-height / 5;
		fill: $color-black;
		transition: all $transition--fast;
	}

	&::before {
		content: "";
		width: 100%;
		height: 2%;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: height $transition--fast;
		background-color: $color-black;
	}
}

.square-icon:hover {
	&:before {
		height: 100%;
	}

	.square-icon {
		&__text {
			transform: translate3d(1.5rem, 0, 0);
			color: $color-white;
		}

		&__item {
			transform: translate3d(-1.5rem, 0, 0);
			fill: $color-white;
		}
	}
}

@include viewport-medium {
	.square-icon {
		&:before {
			height: 100%;
		}

		&__text {
			transform: translate3d(1.5rem, 0, 0);
			color: $color-white;
		}

		&__item {
			transform: translate3d(-1.5rem, 0, 0);
			fill: $color-white;
		}
	}
}

Button 4

Note: No hover effect in IE

Source code

Html


<button class="round-btn flex--center-center">
	<svg class="round-btn__item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.8 268.8"><path d="M265.2 125.6l-80-80c-4.9-4.9-12.8-4.9-17.7 0 -4.9 4.9-4.9 12.8 0 17.7l58.7 58.7H12.5c-6.9 0-12.5 5.6-12.5 12.5 0 6.9 5.6 12.5 12.5 12.5h213.7l-58.7 58.7c-4.9 4.9-4.9 12.8 0 17.7 2.4 2.4 5.6 3.7 8.8 3.7s6.4-1.2 8.8-3.7l80-80C270.1 138.4 270.1 130.5 265.2 125.6z" /></svg>
</button>

Scss


// local var
$icon-size: 4.5rem;

.round-btn {
	background-color: $color-blue-tory;
	height: $icon-size;
	width: $icon-size;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	z-index: 0;

	&__item {
		fill: $color-white;
		width: $icon-size / 2;
	}

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		background-color: rgba($color-blue-tory, 0.3);
		height: 100%;
		width: 100%;
		border-radius: 50%;
		transition: $transition;
		z-index: -1;
	}

	&:hover {
		&::before {
			transform: scale(1.28);
		}
	}
}

Button 5

Note: No hover effect in IE and Edge

Source code

Html


<button class="square-btn flex--vertical-center reset-btn">
    <span class="square-btn__text">View details</span>
    <span class="square-btn__arrow">
        <span class="square-btn__arrow-shaft"></span>
    </span>
</button>

Scss


$icon-height: 7rem;

.square-btn {
	position: relative;
	min-height: $icon-height;
	height: $icon-height;
	background-color: $color-black;
	color: $color-white;
	cursor: pointer;
	overflow: hidden;

	&__text {
		text-align: left;
		margin-left: 3.5rem;
		margin-right: 7rem;
		font-size: 2rem;
		padding-right: 5rem;
		transition: transform $transition;
	}

	&__arrow {
		position: absolute;
		right: 0;
		margin-right: 1.5rem;
		animation: move-left .6s, move-back .6s .2s;

		&:before,
		&:after {
			background-color: $color-white;
			content: "";
			display: block;
			height: .2rem;
			width: 1.5rem;
			position: absolute;
			right: 0;
		}

		&:before {
			transform: rotate(40deg);
			transform-origin: top right;
		}

		&:after {
			transform: rotate(-40deg);
			transform-origin: bottom right;
		}
	}

	&__arrow-shaft {
		position: absolute;
		height: .2rem;
		width: 3rem;
		background-color: $color-white;
		right: 0;
	}
}
// hover effect
.square-btn:hover {
	.square-btn__text {
		transform: translateX(calc(0% + 7rem));
		transition: transform $transition--fast;
	}

	.square-btn__arrow {
		animation: move-forwards .4s, move-right .6s .2s;
		animation-fill-mode: forwards;
	}

	.square-btn__arrow-shaft {
		animation: wider-shaft .95s;
	}
}

@keyframes wider-shaft {
	0% {
		transform: scaleX(1);
		transform-origin: right;
	}

	50% {
		transform: scaleX(1.5);
		transform-origin: right;
	}

	100% {
		transform: scaleX(1);
		transform-origin: right;
	}
}

@keyframes move-right {
	from {
		right: 100%;
	}

	to {
		right: calc(100% - 7rem);
	}
}

@keyframes move-left {
	from {
		right: calc(100% - 7rem);
	}

	to {
		right: 100%;
	}
}

@keyframes move-forwards {
	from {
		right: 0;
	}

	to {
		right: calc(0% - 7rem);
	}
}

@keyframes move-back {
	from {
		right: calc(0% - 7rem);
	}

	to {
		right: 0;
	}
}

// IE fix
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.square-btn:hover {
		.square-btn__text {
			transform: none;
			transition: none;
		}

		.square-btn__arrow {
			right: 0;
			animation: none;
		}

		.square-btn__arrow-shaft {
			animation: none;
		}
	}
}

@supports (-ms-accelerator:true) {
	.square-btn:hover {
		.square-btn__text {
			transform: none;
			transition: none;
		}

		.square-btn__arrow {
			right: 0;
			animation: none;
		}

		.square-btn__arrow-shaft {
			animation: none;
		}
	}
}

@supports (-ms-ime-align:auto) {
	.square-btn:hover {
		.square-btn__text {
			transform: none;
			transition: none;
		}

		.square-btn__arrow {
			right: 0;
			animation: none;
		}

		.square-btn__arrow-shaft {
			animation: none;
		}
	}
}

Button 6

Note: No transform scale in IE

Source code

Html


<button class="main-icon">
    <span class="main-icon__arrows"></span>
</button>

Scss


// local var
$icon-size: 6.5rem;

.main-icon {
	position: relative;
	height: $icon-size;
	width: $icon-size;

	&::after {
		content: '';
		@include position-all-sides;
		background-color: $color-blue-tory;
		height: $icon-size;
		width: $icon-size;
		border-radius: 50%;
		transform: scale(1);
		transition: $transition;
	}

	&__arrows {
		&::after, &::before {
			content: '';
			@include position-center;
			left: 52%; // added to fix whitespace in svg
			background-image: url('~@/assets/images/icons/angle--white.svg');
			height: 1.8rem;
			width: 1.8rem;
			background-size: 100% 100%;
			z-index: 1;
			opacity: .8;
			transition: $transition--fast;
		}

		&::before {
			left: 20%;
			opacity: 0;
		}
	}
}
// button hover
.main-icon:hover {
	&::after {
		transform: scale(1.15);
		background-color: $color-black;
	}

	.main-icon__arrows::after {
		left: 80%;
		opacity: 0;
	}

	.main-icon__arrows::before {
		left: 52%;
		opacity: 1;
	}
}
// IE overwrite
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.main-icon:hover {
		&::after {
			transform: scale(1);
		}
	}
}

Button 7

Hover me

Source code

Html


<a href="#" class="main-button">
    <span class="main-button__text">Hover me</span>
</a>

Scss


.main-button {
    width: auto;
    padding: 3rem 7rem;
    background-color: $color-black;
    color: $color-white;
    font-size: 2rem;
    display: inline-block;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        background-image: url('~@/assets/images/icons/arrow--white.svg');
        width: 2rem;
        height: 2rem;
        left: 3.6rem;
        top: 52%;
        transform: scale(.7) translateY(-50%) translate3d(0,0,0);
        opacity: 0;
        transition: $transition;
    }

    &__text {
        display: block;
        transform: translate3d(0,0,0);
        transition: $transition;
    }
}
// hover effect
.main-button:hover {
	.main-button__text {
		transform: translate3d(2rem,0,0);
	}

	&::before {
		transform: scale(1) translateY(-50%) translate3d(1.2rem,0,0);
		opacity: 1;
	}
}

Button 8

Hover me

Source code

Html


<a href="#" class="btn-eight flex--vertical-center">
	<svg class="btn-eight__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.8 268.8"><path d="M265.2 125.6l-80-80c-4.9-4.9-12.8-4.9-17.7 0 -4.9 4.9-4.9 12.8 0 17.7l58.7 58.7H12.5c-6.9 0-12.5 5.6-12.5 12.5 0 6.9 5.6 12.5 12.5 12.5h213.7l-58.7 58.7c-4.9 4.9-4.9 12.8 0 17.7 2.4 2.4 5.6 3.7 8.8 3.7s6.4-1.2 8.8-3.7l80-80C270.1 138.4 270.1 130.5 265.2 125.6z" /></svg>
	<span class="btn-eight__text">Hover me</span>
</a>

Scss


.btn-eight {
	&__icon {
		height: 1.7rem;
		margin-top: .4rem;
		fill: $color-black;
		margin-right: 2rem;
		transition: $transition--fast;
	}

	&__text {
		font-size: 2.2rem;
		color: $color-black;
		white-space: nowrap;
		transition: $transition--fast;
	}
}
// hover effect
.btn-eight:hover {
	.btn-eight__icon {
		transform: translateX(2.5rem);
		fill: $color-blue-tory;
	}

	.btn-eight__text {
		transform: translateX(2rem);
		color: $color-blue-tory;
	}
}

Button 9

Note: Different animation in IE and Edge

Source code

Html


<button class="btn-moving reset-btn flex--vertical-center">
	<span class="btn-moving__background">
	</span>
	<span class="btn-moving__text">Lorem ipsum dolor sit amet</span>
	<span class="btn-moving__plus">+</span>
</button>

Scss


//Local var
$icon-size: 4rem;

.btn-moving {
	width: max-content;
	position: relative;
	height: $icon-size;

	&__background {
		position: absolute;
		top: 0;
		background-color: $color-gray-wild-sand;
		height: $icon-size;
		width: $icon-size;
		border-radius: $icon-size;
		animation: move-background-left $transition--slow reverse;
		z-index: 0;
	}

	&__text, &__plus {
		margin-left: 1.7rem;
		z-index: 1;
	}

	&__text {
		font-size: 1.7rem;
	}

	&__plus {
		margin-right: 1.7rem;
	}
}
// hover effect
.btn-moving:hover {
	.btn-moving__background {
		animation: move-background-right $transition--slow;
		animation-fill-mode: forwards;
	}
}

// keyframes
@keyframes move-background-right {
	0% {
		width: $icon-size;
		margin-left: 0;
	}

	50% {
		width: 100%;
		margin-left: 0;
	}

	100% {
		width: $icon-size;
		margin-left: calc(100% - #{$icon-size});
	}
}

@keyframes move-background-left {
	0% {
		width: $icon-size;
		margin-left: 0;
	}

	50% {
		width: 100%;
		margin-left: 0;
	}

	100% {
		width: $icon-size;
		margin-left: calc(100% - #{$icon-size});
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.btn-moving__background {
		animation: none;
		transition: width $transition--slow;
	}

	.btn-moving:hover {
		.btn-moving__background {
			animation: none;
			width: 100%;
		}
	}
}

@supports (-ms-accelerator:true) {
	.btn-moving {
		&__background {
			animation: none;
			transition: width $transition--slow;
		}
	}

	.btn-moving:hover {
		.btn-moving__background {
			animation: none;
			width: 100%;
		}
	}
}

@supports (-ms-ime-align:auto) {
	.btn-moving__background {
		animation: none;
		transition: width $transition--slow;
	}

	.btn-moving:hover {
		.btn-moving__background {
			animation: none;
			width: 100%;
		}
	}
}