Button Option Group

Developer
Mike
Size
1,859 Kb
Views
4,046

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,046
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
A Pen by Mike
Jumbotron from Bootstrap Billboard
Tabbed pos mockup slider
Features Section
Product page with fancy hover effect
A Pen by Mike
Animated Intro Section
Dropcap Layout
Parallax backgrounds with centered content
Step By Step
Create amazing Facebook ads 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!