Here are several design examples for the frontend editor buttons using the style attribute with different visual styles:
1. Modern Blue Button
[frontend_editor_post text="Edit Content" style="background: #2271b1; color: white; padding: 8px 16px; border-radius: 4px; font-weight: 500; text-transform: uppercase; font-size: 13px;"]
2. Gradient Button
[frontend_editor text="Quick Edit" style="background: linear-gradient(135deg, #6e8efb, #a777e3); color: white; padding: 10px 20px; border-radius: 30px; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"]
3. Outline Style
[frontend_editor_design text="Edit Design" style="background: transparent; color: #2271b1; padding: 8px 16px; border: 2px solid #2271b1; border-radius: 4px; font-size: 14px; transition: all 0.3s ease;"]
4. Floating Action Button
[frontend_editor text="✏️" style="position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #2271b1; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 100;"]
5. Minimalist Link Style
[frontend_editor_post text="Edit this section" style="background: none; color: #2271b1; padding: 0; border-bottom: 1px dashed #2271b1; border-radius: 0; font-size: 13px;"]
6. Dark Mode Button
[frontend_editor_design text="Customize Design" style="background: #1d2327; color: #f0f0f1; padding: 10px 20px; border-radius: 3px; border: 1px solid #2c3338; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;"]
7. Hover Effects Button
[frontend_editor text="Edit Page" style="background: #f0f0f1; color: #1d2327; padding: 8px 16px; border-radius: 4px; transition: all 0.3s ease;" css="hover-effect"]
Then add this to your CSS:
.hover-effect:hover { background: #2271b1 !important; color: white !important; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
8. Badge Style
[frontend_editor_post text="Admin Edit" style="background: #d63638; color: white; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; position: absolute; top: 10px; right: 10px;"]
9. Icon Button
[frontend_editor_design text="<span style='font-size:18px'>⚙️</span> Customize" style="background: rgba(0,0,0,0.05); color: #1d2327; padding: 6px 12px 6px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px;"]
10. Animated Button
[frontend_editor text="Quick Edit" style="background: #2271b1; color: white; padding: 10px 20px; border-radius: 4px; position: relative; overflow: hidden;"]
Add this CSS for animation:
.frontend-editor-link:hover::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: shine 1.5s infinite;}@keyframes shine { 100% { left: 100%; }}
These examples demonstrate how versatile the editor buttons can be with just the style attribute. You can:
Change colors, sizes, and shapes
Add hover effects
Create floating buttons
Implement different visual styles
Add icons and animations
The buttons will maintain all their functionality while having completely custom appearances.