Меню с SVG-иконкой и текстом

Пример:

HTML:

<div class="svg-btn">
	<a href="#link">
		<span>Главная</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Главная</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Главная</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>Услуги</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Наши</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Услуги</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>О нас</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">О нас</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">О нас</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>Контакты</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M160 448c-25.6 0-51.2-22.4-64-32-64-44.8-83.2-60.8-96-70.4V480c0 17.67 14.33 32 32 32h256c17.67 0 32-14.33 32-32V345.6c-12.8 9.6-32 25.6-96 70.4-12.8 9.6-38.4 32-64 32zm128-192H32c-17.67 0-32 14.33-32 32v16c25.6 19.2 22.4 19.2 115.2 86.4 9.6 6.4 28.8 25.6 44.8 25.6s35.2-19.2 44.8-22.4c92.8-67.2 89.6-67.2 115.2-86.4V288c0-17.67-14.33-32-32-32zm256-96H224c-17.67 0-32 14.33-32 32v32h96c33.21 0 60.59 25.42 63.71 57.82l.29-.22V416h192c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32zm-32 128h-64v-64h64v64zm-352-96c0-35.29 28.71-64 64-64h224V32c0-17.67-14.33-32-32-32H96C78.33 0 64 14.33 64 32v192h96v-32z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Контакты</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Контакты</textPath>
				</text>
			</g>
		</svg>
	</a>
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" width="0" height="0">
		<defs>
			<path id="circlePath" d="M 150, 150 m -50, 0 a 50,50 0 0,1 100,0 a 50,50 0 0,1 -100,0" />
		</defs>
	</svg> 
</div>

<span>Главная</span>

<span>

</span>

<g>

<textPath xlink:href="#circlePath">Главная</textPath>

</text>

<textPath xlink:href="#circlePath" startOffset="50%">Главная</textPath>

</text>

</g>

</svg>

</a>

<span>Услуги</span>

<span>

</span>

<g>

</text>

<textPath xlink:href="#circlePath" startOffset="50%">Услуги</textPath>

</text>

</g>

</svg>

</a>

<span>

</span>

<g>

</text>

</text>

</g>

</svg>

</a>

<span>Контакты</span>

<span>

</span>

<g>

<textPath xlink:href="#circlePath">Контакты</textPath>

</text>

<textPath xlink:href="#circlePath" startOffset="50%">Контакты</textPath>

</text>

</g>

</svg>

</a>

<defs>

</defs>

</svg>

</div>

CSS:

.svg-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;	
	margin: 20px 0;	
}
.svg-btn a {
    position: relative;
    padding: 20px;
    text-transform: uppercase;
    font-size: 20px;
	text-decoration: none;
	color: #337AB7;
	font-weight: bold;
}
.svg-btn a span:first-of-type {
    transition: 0.4s;
	transform: scale(1);
	opacity: 1;
	display: inline-block;
}
.svg-btn a svg {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    opacity: 0;
    text-transform: uppercase;
	font-size: 18px;
    transition: 0.4s;
    color: #337AB7;
	pointer-events: none;
}
.svg-btn a span svg {
    width: 30px;
	height: 30px;
	fill: #337AB7;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
}
.svg-btn a:hover span {
	transform: scale(0);
}
.svg-btn a:hover span svg {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.svg-btn a:hover svg {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition-delay: 150ms;
    transition: all 300ms ease-in-out;
}
.svg-btn a svg g {
    transform-origin: center;
    animation: rotateSVG 6s linear infinite;
}
@keyframes rotateSVG {
    0% {
        transform: rotate(0deg);
	}
    100% {
        transform: rotate(360deg);
	}
}

.svg-btn {

display: flex;

flex-wrap: wrap;

align-items: center;

justify-content: center;

margin: 20px 0;

}

.svg-btn a {

position: relative;

padding: 20px;

text-transform: uppercase;

font-size: 20px;

text-decoration: none;

color: #337AB7;

font-weight: bold;

}

.svg-btn a span:first-of-type {

transition: 0.4s;

transform: scale(1);

opacity: 1;

display: inline-block;

}

.svg-btn a svg {

position: absolute;

width: 200px;

height: 200px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

transform-origin: center;

opacity: 0;

text-transform: uppercase;

font-size: 18px;

transition: 0.4s;

color: #337AB7;

pointer-events: none;

}

.svg-btn a span svg {

width: 30px;

height: 30px;

fill: #337AB7;

transform: translate(-50%, -50%) scale(0);

opacity: 0;

}

.svg-btn a:hover span {

transform: scale(0);

}

.svg-btn a:hover span svg {

transform: translate(-50%, -50%) scale(1);

opacity: 1;

}

.svg-btn a:hover svg {

transform: translate(-50%, -50%) scale(1);

opacity: 1;

transition-delay: 150ms;

transition: all 300ms ease-in-out;

}

.svg-btn a svg g {

transform-origin: center;

animation: rotateSVG 6s linear infinite;

}

@keyframes rotateSVG {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

За основу взято решение, найденное на codepen.io у пользователя Chris Bolson

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: