As a Content Developer at IKEA, I frequently participate in agile development projects. I work closely with the global IKEA UI guidelines to create custom styles tailored to various campaigns. After development, I also review data to determine if further development is needed.
We have built a new anchor layout in the CMS using HTML and CSS to boost engagement and help users find information and products more efficiently.
The original minimalist black text button had a click-through rate of 1.2%. After switching to a colorful image button, the click-through rate increased significantly to 7.7%, greatly improving anchor button engagement and enhancing user interaction with the page.
.png){kind=small}
1<div class="bg1" onclick="location.href='#play';return false;">
2
3<h5 class="heading-s tittle4">
4 <a href="#play" style="color:#FFF">Playing Space
5 </a>
6</h5>
7
8
9<div class="body-m des1">
10 <a href="#play" style="color:#FFF">Play is crucial for growth
11 </a>
12</div>
13
14<a href="#play">
15<img class="pub__btn__inner1" src="https://www.ikea.com.tw/dairyfarm/tw/uploader/image/1696313898_721.png" />
16</a></div>
17
18
19<style type="text/css">.bg1 {
20
21 align-items: flex-start;
22 width: auto;
23 height: 88px;
24 padding: 20px;
25 gap: 2px;
26 background-color: #3d1a2b;
27 border-radius: 5px;
28 background-size: 12%;
29 background-repeat: no-repeat;
30 background-image:url("https://www.ikea.com.tw/dairyfarm/tw/uploader/image/1692864118_27.png");
31 background-position-x: 60%;
32 position: relative; /* Add this line */
33 overflow: hidden; /* Add this line */
34 }
35
36
37
38.bg1::before {
39 content: "";
40 position: absolute;
41 top: 0;
42 left: 0;
43 width: 100%;
44 height: 100%;
45 background: inherit; /* Inherit the background from .bg1 */
46 filter: blur(1px); /* Apply blur only to the background image */
47 z-index: -1;
48 }
49
50
51.bg1:hover {
52 filter: grayscale(20%);
53 transition: opacity 0.5s ease;
54 }
55
56.filter{
57 filter: blur(4px);
58 filter: drop-shadow(-2px -3px 4px #FFFFFF)
59 }
60
61.tittle4{
62 color:white;
63 z-index: 2;
64 margin:5px 0 0 0;
65 }
66
67.des1{
68 color:white;
69 z-index: 2;
70 }
71
72.pic2{
73 z-index:1;
74 position:absolute;
75 top:0%;
76 left:85%;
77 filter: drop-shadow(-2px -3px 4px #BA3A40);width: 100px; height: 100px;
78 }
79
80.pub__btn__inner1{
81 z-index: 2;
82 position: relative;
83 top:-2.5rem; left: 85%;
84 border-radius: 99px;
85 background: var(--interactive-interactive-secondary-bg-default, #FFFFFF);padding: 5px;border:none;
86 }
87
88
89@media screen and (min-width: 1101px) and (max-width: 1365px){.bg1 {background-size: 30%;}}
90@media screen and (min-width: 768px) and (max-width: 1100px){.bg1 {background-size: 30%;}}
91@media screen and (max-width:767px) {.bg1 {background-size: 29%;background-position-y: 50%;}.des1{display:none;}.pub__btn__inner1{top:-2rem;}
92
93</style>
