SVG-button Responsive

Developer
Томаш Хамлай
Size
2,481 Kb
Views
14,168
  1. SVG-button Responsive Previews
  2. SVG-button Responsive HTML Codes
  3. SVG-button Responsive CSS Codes

How do I make an svg-button responsive?

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

SVG-button Responsive Previews
IQ Test

SVG-button Responsive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG-button Responsive</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 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" fill="#093b4d" stroke="#ffe9cd" stroke-width="3" /> <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 x="192" y="50.5" text-anchor="middle" style="font-family: 'Myriad Pro Condensed'; letter-spacing: 0.05em; dominant-baseline: central; line-height: 101px; fill: #ffe9cd; stroke: none; font-size: 1.5em;">Записаться</text> </svg>	</div>
</div>
</body>
</html>

SVG-button Responsive - 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;
}
.svg-button { filter: drop-shadow(6px 15px 8px #000);
}
SVG-button Responsive - Script Codes
SVG-button Responsive - Script Codes
Home Page Home
Developer Томаш Хамлай
Username TomashKhamlai
Uploaded November 11, 2022
Rating 3
Size 2,481 Kb
Views 14,168
Do you need developer help for SVG-button Responsive?

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
Teplomer.in.ua calculator
Jplayer
SVG-button
Calculator
Firefox SVG Example
Calc2
SVG Mascing Stretching AR
SVG Clipping
Nesting countersEdit
SVG Clipping Stretching
Create amazing web content 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!