Playing Around with BEM

Developer
Jon Milner
Size
2,302 Kb
Views
10,120
  1. Playing Around with BEM Previews
  2. Playing Around with BEM HTML Codes
  3. Playing Around with BEM CSS Codes

How do I make an playing around with bem?

What is a playing around with bem? How do you make a playing around with bem? This script and codes were developed by Jon Milner on 09 December 2022, Friday.

Playing Around with BEM Previews
IQ Test

Playing Around with BEM - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing Around with BEM</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="button" href="#">Regular Button</a>
<hr/><a class="button button--small" href="#">Small Button</a>
<hr/><a class="button button--large" href="#">Large Button</a>
<hr/><a class="button button--blue" href="#">Regular Blue Button</a>
<hr/><a class="button button--blue button--small" href="#">Small Blue Button</a>
<hr/><a class="button button--blue button--large" href="#">Large Blue Button</a>
<hr/><a class="button button--pink" href="#">Regular Pink Button</a>
<hr/><a class="button button--pink button--small" href="#">Small Pink Button</a>
<hr/><a class="button button--pink button--large" href="#">Large Pink Button</a>
</body>
</html>

Playing Around with BEM - Script Codes CSS Codes

.button { display: inline-block; margin: 5px; padding: 10px; color: #0088cc; font-family: sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; -webkit-transition: all .2s ease; transition: all .2s ease;
}
.button--small { padding: 8px; font-size: 11px;
}
.button--large { padding: 12px; font-size: 13px;
}
.button--blue { background: #0088cc; border: 1px solid #006699; color: #fff;
}
.button--blue:hover { background: #00aaff;
}
.button--pink { background: #ea1767; border: 1px solid #bd1152; color: #fff;
}
.button--pink:hover { background: #ee4686;
}
Playing Around with BEM - Script Codes
Playing Around with BEM - Script Codes
Home Page Home
Developer Jon Milner
Username jonmilner
Uploaded December 09, 2022
Rating 3
Size 2,302 Kb
Views 10,120
Do you need developer help for Playing Around with BEM?

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!

Jon Milner (jonmilner) Script Codes
Name
Kirby in CSS
Basic Custom Select Element
Chomp Chomp
Cisco Logo Loading Animation
A Pen by Jon Milner
Animated Multi-Step Progress Bar
Simple CSS Radial Progress Bar
Kitty Blocks
Playing Around with AMCSS
Responsive Hexagon Layout using Sass Mixin
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!