QUICK TIP - Create A Ring Ring Phone Effect Using CSS

0 6,765
Some specific effects support marketing much such as: ring phone, highlight-text, popup … These effects will bring a lot of benefits for marketing field.

Why does it brings more benefits?

The effect will abstract audience more than in normal mode. Animation will make the website more good looking and having a good design. Besides, the technique for implementing these effects are so simple and easy to use in general. In addtion, developers can spend just a few minute to achieve the effects. The effects are used much more than other effects using scripts such as JQuery, JavaScript because of its simple. Thus, more users as none developers can use the effect easily. So that, this post can support you to achieve this effect easily for just copy & paste. In addition, the we will support you can learn and understand to conduct this technique by line. You do not require to know much about HTML & CSS with you can learn from courses here. We add more links for related courses that you can learn by your self through this post. OKay! Here we go now. The technique has 2 main parts: HTML and CSS.  We can imagine that HTML is your new house without painting and decorations. Then, CSS will help you to make your house become more and more beautiful and good design. Let’s go to the first part HTML.


HTML is a part that deveoper generally put it on front-page or home page. Technically, a website has two main parts front-end and back-end. In term of front-end, this page means whatever you can see in your browsers and it considers as front pages. In term of back-end, it will storage data on website. OKay! We just give you an overview of structure of your website. Let’s focus on this part. In this step, you should consider your house including 3 main parts: root, wall, and ground inside root and wall. In this case, “wrapper” in tag div is a root of your house that will cover wall and ground inside it. Next, “ring” in tag div will role as the walls around your house and then “ring-effect-phone ring-effect-green ring-effect-show” in tag div is your ground level inside wall and root. Finally,  “ring-effect-ph-circle”, “ring-effect-ph-circle-fill”, “ring-effect-ph-img-circle” are rooms inside. Now, we hope you understand the level structure of HTML  in this case.  


As we discuss above, CSS is decorative parts will make your house look more and more good. Now, we look at the first line of code. “.ring-effect-ph-circle { ” will mean the rest-room which we need to decorate it. Example, how is it height, width…? Besides, you can set animation type, transitions. By using the same way, we can set for other rooms ” .ring-effect-phone {” and “.ring-effect-ph-img-circle {“.


You can view demo below:

Final words

Up to here, we hope you can successfully add the effect on your website.  Furthermore, you spend just a few minutes to achieve. You can change size or colour as you expect from CSS. If you still confuse about this tutorial you can ask as comment below or you can take some courses that we mention as link above to learn more about CSS and HTML.

You may also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More