Simple Button

Developer
Patrick
Size
1,684 Kb
Views
12,144
  1. Simple Button Previews
  2. Simple Button HTML Codes
  3. Simple Button CSS Codes

How do I make an simple button?

Quick and simple button using pseudo class for border to maintain consistent border-radius.. What is a simple button? How do you make a simple button? This script and codes were developed by Patrick on 21 November 2022, Monday.

Simple Button Previews
IQ Test

Simple Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="button">button</a>
</body>
</html>

Simple Button - Script Codes CSS Codes

body { margin: 100px; background: #e1f0ff; }
.button { display: block; position: relative; width: 100px; height: 50px; background: #5197dc; font: 18px/40px helvetica; color: #fff; text-align: center; text-decoration: none; border-radius: 5px; box-shadow: rgba(0,0,0,.2) 0 -10px 0 inset; -webkit-transition: all .15s; transition: all .15s; } .button:before { content: ""; position: absolute; z-index: -1; top: -5px; right: -5px; bottom: -5px; left: -5px; border: 10px solid #fff; border-radius: 10px; } .button:hover { box-shadow: rgba(0,0,0,0) 0 0 0 inset; line-height: 50px; }
Simple Button - Script Codes
Simple Button - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3
Size 1,684 Kb
Views 12,144
Do you need developer help for Simple 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!

Patrick (hinducows) Script Codes
Name
CSS Filters
3D Transforms
Flat-ish UI Login Element
Item Display
Overlay Drop Description
Sloppy Panels
Hexagon v2
Menu Overlay
JQuery CSS Transition Content Slide-In
Arrow Navigation
Create amazing captions 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!