Playing with Buttons
How do I make an playing with buttons?
What is a playing with buttons? How do you make a playing with buttons? This script and codes were developed by Ash on 09 August 2022, Tuesday.
Playing with Buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="btn"> Button </div> <div class="btn rev"> Button </div> <br> <div class="btn btn-red"> Button </div> <div class="btn btn-blue"> Button </div> <div class="btn btn-green"> Button </div> <div class="btn btn-yellow"> Button </div> <br> <div class="btn btn-red rev"> Button </div> <div class="btn btn-blue rev"> Button </div> <div class="btn btn-green rev"> Button </div> <div class="btn btn-yellow rev"> Button </div>
<br> <div class="btn btn-sm"> Tiny </div> <div class="btn"> Regular </div> <div class="btn btn-m"> LArge </div> <div class="btn btn-lg"> Colossus </div>
</div>
</body>
</html>
Playing with Buttons - Script Codes CSS Codes
.btn,
.btn:link,
.btn:visited { display: inline-block; font-family: helvetica, sans-serif; letter-spacing: .15em; margin-bottom: .5em; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; transition: all .5s; border-color: #3b3a36; border-style: solid; border-radius: 5px; border-width: 1px; color: #3b3a36; font-weight: 100; font-size: 14px; background: transparent;
}
.btn:hover { color: #a3a19a; border: 1px solid #a3a19a; transition: all 0.5s;
}
.btn-red,
.btn-red:link,
.btn-red:visited { display: inline-block; font-family: helvetica, sans-serif; letter-spacing: .15em; margin-bottom: .5em; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; transition: all .5s; border-color: #DA4453; border-style: solid; border-radius: 5px; border-width: 1px; color: #DA4453; font-weight: 100; font-size: 14px; background: #F67F7B;
}
.btn-red:hover { color: #DA4453; background: #f46863; border: 1px solid #DA4453; transition: all 0.5s;
}
.btn-blue,
.btn-blue:link,
.btn-blue:visited { display: inline-block; font-family: helvetica, sans-serif; letter-spacing: .15em; margin-bottom: .5em; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; transition: all .5s; border-color: #52B3D9; border-style: solid; border-radius: 5px; border-width: 1px; color: #2d9fcb; font-weight: 100; font-size: 14px; background: #81CFE0;
}
.btn-blue:hover { color: #237ea2; background: #58bfd6; border: 1px solid #2d9fcb; transition: all 0.5s;
}
.btn-green,
.btn-green:link,
.btn-green:visited { display: inline-block; font-family: helvetica, sans-serif; letter-spacing: .15em; margin-bottom: .5em; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; transition: all .5s; border-color: #72a53b; border-style: solid; border-radius: 5px; border-width: 1px; color: #72a53b; font-weight: 100; font-size: 14px; background: #B3E061;
}
.btn-green:hover { color: #3e5a20; border: 1px solid #3e5a20; transition: all 0.5s; background: #8CC152;
}
.btn-yellow,
.btn-yellow:link,
.btn-yellow:visited { display: inline-block; font-family: helvetica, sans-serif; letter-spacing: .15em; margin-bottom: .5em; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; transition: all .5s; border-color: #f6cd34; border-style: solid; border-radius: 5px; border-width: 1px; color: #edbd0a; font-weight: 100; font-size: 14px; background: #FAE596;
}
.btn-yellow:hover { color: #bc9608; border: 1px solid #bc9608; background: #F8D965; transition: all 0.5s;
}
.btn-sm { font-size: 0.5em;
}
.btn-m { font-size: 1.5em;
}
.btn-lg { font-size: 2em;
}
.rev { color: #FFFFFF; border-color: #FFFFFF;
}
body { width: 100vw; height: 100vh; text-align: center; background: #EEEEEE; overflow: hidden;
}
Developer | Ash |
Username | littleginger |
Uploaded | August 09, 2022 |
Rating | 3 |
Size | 3,099 Kb |
Views | 46,552 |
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!
Name | Size |
Window | 4,246 Kb |
Emoji | 2,765 Kb |
CSS Isometric Pokemon | 4,874 Kb |
Sailor Moon Pixel Art | 12,741 Kb |
A Pen by Ash | 2,386 Kb |
Me | 2,544 Kb |
To Do List with jQuery | 2,547 Kb |
Telescope | 2,241 Kb |
Contact form | 2,294 Kb |
Button | 2,144 Kb |
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!
Name | Username | Size |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Blog | Rottingroom | 1,430 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Lecture 1 | Law | 0 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!