Button Option Group

Developer
Mike
Size
1,859 Kb
Views
4,048
  1. Button Option Group Previews
  2. Button Option Group HTML Codes
  3. Button Option Group CSS Codes

How do I make an button option group?

A neat way to display related options.http://zurb.com/building-blocks/button-option-group. What is a button option group? How do you make a button option group? This script and codes were developed by Mike on 13 January 2023, Friday.

Button Option Group Previews
IQ Test

Button Option Group - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Option Group</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="button-group" data-grouptype="OR"> <div class="responsive appear-animation pull-left" data-appear-animation="fadeInDown"> <button href="#" class="small button primary radius">Buy it now</button> </div> <button href="#" class="small button success radius">Learn More</button>
</div> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Button Option Group - Script Codes CSS Codes

.button-group { position: relative; display: inline-block; margin: 1rem 0;
}
.button-group:before { content: attr(data-grouptype); z-index: 99999; color: #999; display: block; font-size: 1rem; padding: 0.25em; border-radius: 50%; background: #fff; position: absolute; left: 42.5%; top: 0.35rem;
}
.button-group button + button { margin-left: 5px;
}
Button Option Group - Script Codes
Button Option Group - Script Codes
Home Page Home
Developer Mike
Username honchoman
Uploaded January 13, 2023
Rating 3
Size 1,859 Kb
Views 4,048
Do you need developer help for Button Option Group?

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!

Mike (honchoman) Script Codes
Name
Product page with fancy hover effect
Tabbed pos mockup slider
Free App Template for Bootstrap 3
Click Carousel
Features Section
Landing-Pages Panel
Capture Header
Flat UI Button
Product Features
Dropcap Layout
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!