Home Web Design CSS CSS Circle Menu With Icons | Pure HTML CSS Circular Menu

CSS Circle Menu With Icons | Pure HTML CSS Circular Menu

May 30, 2019

13843

How we can create a circle shape menu with HTML & CSS? Solution: CSS Circle Menu With Icons, Pure HTML CSS Circular Menu.

Maybe you have seen a circular menu before, Nowadays some websites use this type of menu. Peoples who want to make their website good looking and attractive they always use different kinds of elements. This is also a part of good UI & UX design.

Now question is that how we can also create a circular menu? After seeing this post, you will be able to create this. Because I am providing a solution to your need. So, Today I am sharing CSS Circle Menu With Icons, a pure HTML CSS Circular menu. This also has a responsive design using CSS, you can call this Pure CSS Responsive Circular Menu.

This menu has something like the material design because I used good shadow combination. & I had put two times on every CSS animation property because all browsers can support this program. Last time my one visitor says, it’s not working on Edge browser, That’s why I am doing that this time. I used the font-awesome (get) library for creating icons.

If you are thinking now, how the program actually is which I am talking about, then see this preview given below.

Preview Of Circular Menu With Material Design

See this video preview to getting an idea of how this program looks like.

Now you can see this program visually. If you like this, then get the source code of its.

Pure CSS Circle Menu Source Code

Before sharing source code, Let’s talk a little bit about the program. As you know this is a Pure HTML CSS Circle or Circular Menu with icons and responsive design. To create this program I used only an external library for icons, that’s I told about before. I mostly used CSS transition and transform property to creating this. I also use duplicate animation property with -WebKit- extension. Because most browsers can run this program properly.

I also used CSS @media property to create this program responsively.

For creating this program you have to create only 2 files. One for HTML and one for CSS. Follow the steps to create this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>CSS Circle Menu | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <link rel="stylesheet" href="style.css"> 
</head>

<body>

  <nav class="menu">
   <input type="checkbox" href="#" class="expandmenu" name="expandmenu" id="expandmenu" />
   <label class="expandmenu-button" for="expandmenu">
    <span class="lines first-line"></span>
    <span class="lines sec-line"></span>
    <span class="lines third-line"></span>
  </label>

   <a href="#" class="menu-item col1"> <i class="fas fa-home"></i> </a>
   <a href="#" class="menu-item col2"> <i class="fas fa-palette"></i> </a>
   <a href="#" class="menu-item col3"> <i class="fas fa-bell"></i> </a>
   <a href="#" class="menu-item col4"> <i class="fas fa-cart-arrow-down"></i> </a>
   <a href="#" class="menu-item col5"> <i class="fa fa-phone"></i> </a>
   <a href="https://webdevtrick.com" class="menu-item col6"> <i class="fas fa-info"></i> </a>
</nav>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Circle Menu | Webdevtrick.com</title>

</head>

<body>

</label>

</nav>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
body {
   padding: 0;
   margin: 0;
   background: #333;
   color: #EEEEEE;
   text-align: center;
   font-family: "Lato", sans-serif;
}

a {
   color: inherit;
}
.expandmenu {
   display: none;
}

.menu-item,
.expandmenu-button {
   background: #EEEEEE;
   border-radius: 100%;
   width: 80px;
   height: 80px;
   margin-left: -40px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 80px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.lines {
   width: 25px;
   height: 3px;
   background: #596778;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}

.first-line {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

.sec-line {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.third-line {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.expandmenu:checked + .expandmenu-button .first-line {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}

.expandmenu:checked + .expandmenu-button .sec-line {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.expandmenu:checked + .expandmenu-button .third-line {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 80px;
   height: 80px;
   text-align: center;
   box-sizing: border-box;
   font-size: 26px;
}


.menu-item:hover {
   background: #EEEEEE;
   color: #3290B1;
}

.menu-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.expandmenu-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.expandmenu-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.expandmenu:checked + .expandmenu-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.expandmenu:checked ~ .menu-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.expandmenu:checked ~ .menu-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
   transform: translate3d(0.08361px, -104.99997px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
   transform: translate3d(90.9466px, -52.47586px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
   transform: translate3d(90.9466px, 52.47586px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
   transform: translate3d(0.08361px, 104.99997px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
   transform: translate3d(-90.86291px, 52.62064px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
   transform: translate3d(-91.03006px, -52.33095px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
   transform: translate3d(-0.25084px, -104.9997px, 0);
}

.col1 {
   background-color: #24BCFC;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col1:hover {
   color: #24BCFC;
   text-shadow: none;
}

.col2 {
   background-color: #FF3A3D;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col2:hover {
   color: #FF3A3D;
   text-shadow: none;
}

.col3 {
   background-color: #FFC431;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col3:hover {
   color: #FFC431;
   text-shadow: none;
}

.col4 {
   background-color: #FF670C;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col4:hover {
   color: #FF670C;
   text-shadow: none;
}

.col5 {
   background-color: #35FFD6;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col5:hover {
   color: #35FFD6;
   text-shadow: none;
}

.col6 {
   background-color: #0340D0;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col6:hover {
   color: #0340D0;
   text-shadow: none;
}

@media screen and (max-width: 700px) {
   body {
      padding: 170px 0 0 0;
      width: 100%
   }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

/** code by webdevtrick ( https://webdevtrick.com ) **/

body {

padding: 0;

margin: 0;

background: #333;

color: #EEEEEE;

text-align: center;

font-family: "Lato", sans-serif;

}

a {

color: inherit;

}

.expandmenu {

display: none;

}

.menu-item,

.expandmenu-button {

background: #EEEEEE;

border-radius: 100%;

width: 80px;

height: 80px;

margin-left: -40px;

position: absolute;

color: #FFFFFF;

text-align: center;

line-height: 80px;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

-webkit-transition: -webkit-transform ease-out 200ms;

transition: -webkit-transform ease-out 200ms;

transition: transform ease-out 200ms;

transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;

}

.lines {

width: 25px;

height: 3px;

background: #596778;

display: block;

position: absolute;

top: 50%;

left: 50%;

margin-left: -12.5px;

margin-top: -1.5px;

-webkit-transition: -webkit-transform 200ms;

transition: -webkit-transform 200ms;

transition: transform 200ms;

transition: transform 200ms, -webkit-transform 200ms;

}

.first-line {

-webkit-transform: translate3d(0, -8px, 0);

transform: translate3d(0, -8px, 0);

}

.sec-line {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.third-line {

-webkit-transform: translate3d(0, 8px, 0);

transform: translate3d(0, 8px, 0);

}

.expandmenu:checked + .expandmenu-button .first-line {

-webkit-transform: translate3d(0, 0, 0) rotate(45deg);

transform: translate3d(0, 0, 0) rotate(45deg);

}

.expandmenu:checked + .expandmenu-button .sec-line {

-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);

transform: translate3d(0, 0, 0) scale(0.1, 1);

}

.expandmenu:checked + .expandmenu-button .third-line {

-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);

transform: translate3d(0, 0, 0) rotate(-45deg);

}

.menu {

margin: auto;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 80px;

height: 80px;

text-align: center;

box-sizing: border-box;

font-size: 26px;

}

.menu-item:hover {

background: #EEEEEE;

color: #3290B1;

}

.menu-item:nth-child(3) {

-webkit-transition-duration: 180ms;

transition-duration: 180ms;

}

.menu-item:nth-child(4) {

-webkit-transition-duration: 180ms;

transition-duration: 180ms;

}

.menu-item:nth-child(5) {

-webkit-transition-duration: 180ms;

transition-duration: 180ms;

}

.menu-item:nth-child(6) {

-webkit-transition-duration: 180ms;

transition-duration: 180ms;

}

.menu-item:nth-child(7) {

-webkit-transition-duration: 180ms;

transition-duration: 180ms;

}

.menu-item:nth-child(8) {

-webkit-transition-duration: 180ms;

transition-duration: 180ms;

}

.menu-item:nth-child(9) {

-webkit-transition-duration: 180ms;

transition-duration: 180ms;

}

.expandmenu-button {

z-index: 2;

-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

-webkit-transition-duration: 400ms;

transition-duration: 400ms;

-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);

transform: scale(1.1, 1.1) translate3d(0, 0, 0);

cursor: pointer;

box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

}

.expandmenu-button:hover {

-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);

transform: scale(1.2, 1.2) translate3d(0, 0, 0);

}

.expandmenu:checked + .expandmenu-button {

-webkit-transition-timing-function: linear;

transition-timing-function: linear;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);

transform: scale(0.8, 0.8) translate3d(0, 0, 0);

}

.expandmenu:checked ~ .menu-item {

-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

}

.expandmenu:checked ~ .menu-item:nth-child(3) {

transition-duration: 180ms;

-webkit-transition-duration: 180ms;

-webkit-transform: translate3d(0.08361px, -104.99997px, 0);

transform: translate3d(0.08361px, -104.99997px, 0);

}

.expandmenu:checked ~ .menu-item:nth-child(4) {

transition-duration: 280ms;

-webkit-transition-duration: 280ms;

-webkit-transform: translate3d(90.9466px, -52.47586px, 0);

transform: translate3d(90.9466px, -52.47586px, 0);

}

.expandmenu:checked ~ .menu-item:nth-child(5) {

transition-duration: 380ms;

-webkit-transition-duration: 380ms;

-webkit-transform: translate3d(90.9466px, 52.47586px, 0);

transform: translate3d(90.9466px, 52.47586px, 0);

}

.expandmenu:checked ~ .menu-item:nth-child(6) {

transition-duration: 480ms;

-webkit-transition-duration: 480ms;

-webkit-transform: translate3d(0.08361px, 104.99997px, 0);

transform: translate3d(0.08361px, 104.99997px, 0);

}

.expandmenu:checked ~ .menu-item:nth-child(7) {

transition-duration: 580ms;

-webkit-transition-duration: 580ms;

-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);

transform: translate3d(-90.86291px, 52.62064px, 0);

}

.expandmenu:checked ~ .menu-item:nth-child(8) {

transition-duration: 680ms;

-webkit-transition-duration: 680ms;

-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);

transform: translate3d(-91.03006px, -52.33095px, 0);

}

.expandmenu:checked ~ .menu-item:nth-child(9) {

transition-duration: 780ms;

-webkit-transition-duration: 780ms;

-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);

transform: translate3d(-0.25084px, -104.9997px, 0);

}

.col1 {

background-color: #24BCFC;

box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

}

.col1:hover {

color: #24BCFC;

text-shadow: none;

}

.col2 {

background-color: #FF3A3D;

box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

}

.col2:hover {

color: #FF3A3D;

text-shadow: none;

}

.col3 {

background-color: #FFC431;

box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

}

.col3:hover {

color: #FFC431;

text-shadow: none;

}

.col4 {

background-color: #FF670C;

box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

}

.col4:hover {

color: #FF670C;

text-shadow: none;

}

.col5 {

background-color: #35FFD6;

box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

}

.col5:hover {

color: #35FFD6;

text-shadow: none;

}

.col6 {

background-color: #0340D0;

box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

}

.col6:hover {

color: #0340D0;

text-shadow: none;

}

@media screen and (max-width: 700px) {

body {

padding: 170px 0 0 0;

width: 100%

}

That’s It. Now you have successfully created a CSS Circle Menu With Icons, or Pure HTML CSS Circular Menu With Responsive design. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

7 COMMENTS

Tarun May 31, 2019 At 1:32 am

Really looking cool 👍

Reply
- shaan May 31, 2019 At 4:01 am
  
  Thank you very much tarun 🙂
  
  Reply
Faisal May 31, 2019 At 8:18 am

Thanks.

Reply
- shaan May 31, 2019 At 11:54 am
  
  Please stay connected.
  
  Reply
Pawan June 10, 2019 At 3:29 am

Osm

But

Can u provide make video this..

Reply
- shaan June 10, 2019 At 9:02 am
  
  Sure, I am planning to create videos for youtube.
  
  Reply
red1 February 15, 2021 At 6:00 pm

Bonjour,
je suis novice en programmation Html et css,
Est il possible de rajouter un 7 éme voir 8 éme icone ?
Merci d’avance pour votre retour.

Reply