SVG-button

Developer
Томаш Хамлай
Size
2,677 Kb
Views
8,096
  1. SVG-button Previews
  2. SVG-button HTML Codes
  3. SVG-button CSS Codes

How do I make an svg-button?

What is a svg-button? How do you make a svg-button? This script and codes were developed by Томаш Хамлай on 11 November 2022, Friday.

SVG-button Previews
IQ Test

SVG-button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG-button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg">	<div class="container">	<svg class="svg-button" width="380" height="97" xmlns="http://www.w3.org/2000/svg"> <!-- width: 380px height: 97px; border-radius: 18px; --> <path class="bgc" d="M358 2 A 18 18, 0, 0, 0, 378 20 L 378 77 A 18 18, 0, 0, 0, 360 95 L 20 95 A 18 18, 0, 0, 0, 2 77 L 2 20 A 18 18, 0, 0, 0, 20 2 Z" /> <path d="M357 3 A 19 19, 0, 0, 0, 377 21 L 377 76 A 19 19, 0, 0, 0, 359 94 L 21 94 A 19 19, 0, 0, 0, 3 76 L 3 21 A 19 19, 0, 0, 0, 21 3 Z" fill="transparent" stroke="#8b9791" stroke-width="1" /> <path d="M355 5 A 21 21, 0, 0, 0, 375 23 L 375 74 A 21 21, 0, 0, 0, 357 92 L 23 92 A 21 21, 0, 0, 0, 5 74 L 5 23 A 21 21, 0, 0, 0, 23 5 Z" fill="transparent" stroke="#8c9891" stroke-width="1" /> <text class="btn-text" x="192" y="50.5" text-anchor="middle">Записаться</text> </svg>	</div>
</div>
</body>
</html>

SVG-button - Script Codes CSS Codes

* { margin: 0;
}
html,
body { height: 100%;
}
.bg { min-height: 150px; min-width: 420px; height: 100%; width: 100%; position: relative; background-color: #093b4d;
}
.container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 380px; height: 97px;
}
.container .bgc { fill: #093b4d; stroke-width: 3; stroke: #ffe9cd; transition: fill 2s ease 500ms;
}
.container:hover .bgc { fill: #ffe9cd;
}
.container .btn-text { fill: #ffe9cd; font-family: 'Myriad Pro Condensed'; letter-spacing: 0.05em; dominant-baseline: central; line-height: 101px; stroke: none; font-size: 1.5em; transition: fill 2s ease 500ms;
}
.container:hover .btn-text { fill: #093b4d;
}
.svg-button { filter: drop-shadow(6px 15px 8px #000);
}
SVG-button - Script Codes
SVG-button - Script Codes
Home Page Home
Developer Томаш Хамлай
Username TomashKhamlai
Uploaded November 11, 2022
Rating 3
Size 2,677 Kb
Views 8,096
Do you need developer help for SVG-button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Томаш Хамлай (TomashKhamlai) Script Codes
Name
Calc.js
Teplomer.in.ua calculator
C
SVG Mascing Stretching AR
Calc2
Audiolib.js
Nesting countersEdit
SVG Clipping
Calculator
Jplayer
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!